<!DOCTYPE html>
<html lang="en">
    <head hexo-theme='https://github.com/volantis-x/hexo-theme-volantis/#5.8.0'>
  <meta name="generator" content="Hexo 7.0.0">
  <meta name="Volantis" content="5.8.0">
  <meta charset="utf-8">
  <!-- SEO相关 -->
  
  <link rel="canonical" href="http://example.com/2023/12/18/array/"/>
  <!-- 渲染优化 -->
    <meta http-equiv='x-dns-prefetch-control' content='on' />
      <link rel='dns-prefetch' href='https://unpkg.com'>
      <link rel="preconnect" href="https://unpkg.com" crossorigin>
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Content-Security-Policy" content=" default-src 'self' https:; block-all-mixed-content; base-uri 'self' https:; form-action 'self' https:; worker-src 'self' https:; connect-src 'self' https: *; img-src 'self' data: https: *; media-src 'self' https: *; font-src 'self' data: https: *; frame-src 'self' https: *; manifest-src 'self' https: *; child-src https:; script-src 'self' https: 'unsafe-inline' *; style-src 'self' https: 'unsafe-inline' *; ">
  <meta name="HandheldFriendly" content="True" >
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
  <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <!-- import head_begin begin -->
  <!-- import head_begin end -->
  <!-- Custom Files headBegin begin-->
  
  <!-- Custom Files headBegin end-->
  <!-- front-matter head_begin begin -->
  <!-- front-matter head_begin end -->
  <link rel="preload" href="/css/style.css" as="style">
  <link rel="preload" href="https://unpkg.com/volantis-static@0.0.1654736714924/media/fonts/VarelaRound/VarelaRound-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="https://unpkg.com/volantis-static@0.0.1654736714924/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  <!-- feed -->
  <!-- 页面元数据 -->
  <title>Array - Knowledge</title>
  <meta name="keywords" content="Array,html css node vue node">
  <meta desc name="description" content="html css node vue node - weijt - Knowledge">
  
<meta property="og:type" content="article">
<meta property="og:title" content="Array">
<meta property="og:url" content="http://example.com/2023/12/18/Array/index.html">
<meta property="og:site_name" content="Knowledge">
<meta property="og:description" content="reduce()方法1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889&#x2F;&#x2F; reduce（）方法为归并类方法，最">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png">
<meta property="article:published_time" content="2023-12-18T01:56:49.146Z">
<meta property="article:modified_time" content="2024-08-01T08:56:36.747Z">
<meta property="article:author" content="weijt">
<meta property="article:tag" content="Array">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png">
  <style>
    /* 首屏样式 */
    #safearea {
  display: none;
}
:root {
  --color-site-body: #f4f4f4;
  --color-site-bg: #f4f4f4;
  --color-site-inner: #fff;
  --color-site-footer: #666;
  --color-card: #fff;
  --color-text: #444;
  --color-block: #f6f6f6;
  --color-inlinecode: #c74f00;
  --color-codeblock: #fff7ea;
  --color-h1: #3a3a3a;
  --color-h2: #3a3a3a;
  --color-h3: #333;
  --color-h4: #444;
  --color-h5: #555;
  --color-h6: #666;
  --color-p: #444;
  --color-list: #666;
  --color-list-hl: #30ad91;
  --color-meta: #888;
  --color-read-bkg: #e0d8c8;
  --color-read-post: #f8f1e2;
  --color-copyright-bkg: #f5f5f5;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 0;
}
*::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
*::-webkit-scrollbar-track-piece {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #3dd9b6;
  cursor: pointer;
  border-radius: 2px;
  -webkit-border-radius: 2px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #ff5722;
}
html {
  color: var(--color-text);
  width: 100%;
  height: 100%;
  font-family: UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
  font-size: 16px;
}
html >::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
html >::-webkit-scrollbar-track-piece {
  background: transparent;
}
html >::-webkit-scrollbar-thumb {
  background: #54b5a0 linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent);
  cursor: pointer;
  border-radius: 2px;
  -webkit-border-radius: 2px;
}
html >::-webkit-scrollbar-thumb:hover {
  background: #54b5a0 linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent);
}
body {
  background-color: var(--color-site-body);
  text-rendering: optimizelegibility;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body.modal-active {
  overflow: hidden;
}
@media screen and (max-width: 680px) {
  body.modal-active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
a {
  color: #2092ec;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
a:hover {
  color: #ff5722;
}
a:active,
a:hover {
  outline: 0;
}
ul,
ol {
  padding-left: 0;
}
ul li,
ol li {
  list-style: none;
}
header {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
}
img {
  border: 0;
  background: none;
  max-width: 100%;
}
svg:not(:root) {
  overflow: hidden;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  height: 0;
  border: 0;
  border-radius: 1px;
  -webkit-border-radius: 1px;
  border-bottom: 1px solid rgba(68,68,68,0.1);
}
button,
input {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  cursor: pointer;
}
@supports (backdrop-filter: blur(20px)) {
  .blur {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: saturate(200%) blur(20px);
  }
}
.shadow {
  box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1);
}
.shadow.floatable {
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
.shadow.floatable:hover {
  box-shadow: 0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,0.1), 0 4px 8px 0px rgba(0,0,0,0.1), 0 8px 16px 0px rgba(0,0,0,0.1);
}
#l_cover {
  min-height: 64px;
}
.cover-wrapper {
  top: 0;
  left: 0;
  max-width: 100%;
  height: 100vh;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -khtml-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  color: var(--color-site-inner);
  padding: 0 16px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  position: relative;
  overflow: hidden;
  margin-bottom: -100px;
}
.cover-wrapper .cover-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}
.cover-wrapper .cover-bg.lazyload:not(.loaded) {
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
}
.cover-wrapper .cover-bg.lazyload.loaded {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-name: fadeIn;
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -khtml-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -khtml-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -khtml-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: blur(12px);
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -khtml-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
  }
  100% {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
.cover-wrapper .cover-body {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
}
.cover-wrapper#full {
  height: calc(100vh + 100px);
  padding-bottom: 100px;
}
.cover-wrapper#half {
  max-height: 640px;
  min-height: 400px;
  height: calc(36vh - 64px + 200px);
}
.cover-wrapper #scroll-down {
  width: 100%;
  height: 64px;
  position: absolute;
  bottom: 100px;
  text-align: center;
  cursor: pointer;
}
.cover-wrapper #scroll-down .scroll-down-effects {
  color: #fff;
  font-size: 24px;
  line-height: 64px;
  position: absolute;
  width: 24px;
  left: calc(50% - 12px);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  animation: scroll-down-effect 1.5s infinite;
  -webkit-animation: scroll-down-effect 1.5s infinite;
  -khtml-animation: scroll-down-effect 1.5s infinite;
  -moz-animation: scroll-down-effect 1.5s infinite;
  -o-animation: scroll-down-effect 1.5s infinite;
  -ms-animation: scroll-down-effect 1.5s infinite;
}
@-moz-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  50% {
    top: -16px;
    opacity: 0.4;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@-webkit-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  50% {
    top: -16px;
    opacity: 0.4;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@-o-keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  50% {
    top: -16px;
    opacity: 0.4;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  50% {
    top: -16px;
    opacity: 0.4;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
  }
  100% {
    top: 0;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
.cover-wrapper .cover-body {
  margin-top: 64px;
  margin-bottom: 100px;
}
.cover-wrapper .cover-body,
.cover-wrapper .cover-body .top,
.cover-wrapper .cover-body .bottom {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -khtml-justify-content: center;
  -moz-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  max-width: 100%;
}
.cover-wrapper .cover-body .bottom {
  margin-top: 32px;
}
.cover-wrapper .cover-body .title {
  font-family: "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, Helvetica, monospace;
  font-size: 3.125rem;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.cover-wrapper .cover-body .subtitle {
  font-size: 20px;
}
.cover-wrapper .cover-body .logo {
  max-height: 120px;
  max-width: calc(100% - 4 * 16px);
}
@media screen and (min-height: 1024px) {
  .cover-wrapper .cover-body .title {
    font-size: 3rem;
  }
  .cover-wrapper .cover-body .subtitle {
    font-size: 1.05rem;
  }
  .cover-wrapper .cover-body .logo {
    max-height: 150px;
  }
}
.cover-wrapper .cover-body .m_search {
  position: relative;
  max-width: calc(100% - 16px);
  width: 320px;
  vertical-align: middle;
}
.cover-wrapper .cover-body .m_search .form {
  position: relative;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  width: 100%;
}
.cover-wrapper .cover-body .m_search .icon,
.cover-wrapper .cover-body .m_search .input {
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
.cover-wrapper .cover-body .m_search .icon {
  position: absolute;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  line-height: 2.5rem;
  width: 32px;
  top: 0;
  left: 5px;
  color: rgba(68,68,68,0.75);
}
.cover-wrapper .cover-body .m_search .input {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  height: 2.5rem;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 0.875rem;
  -webkit-appearance: none;
  padding-left: 36px;
  border-radius: 1.4rem;
  -webkit-border-radius: 1.4rem;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  border: none;
  color: var(--color-text);
}
@media screen and (max-width: 500px) {
  .cover-wrapper .cover-body .m_search .input {
    padding-left: 36px;
  }
}
.cover-wrapper .cover-body .m_search .input:hover {
  background: rgba(255,255,255,0.8);
}
.cover-wrapper .cover-body .m_search .input:focus {
  background: #fff;
}
.cover-wrapper .list-h {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -khtml-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  align-items: stretch;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.cover-wrapper .list-h a {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 0;
  -ms-flex: 1 0;
  flex: 1 0;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  font-weight: 600;
}
.cover-wrapper .list-h a img {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  margin: 4px;
  min-width: 40px;
  max-width: 44px;
}
@media screen and (max-width: 768px) {
  .cover-wrapper .list-h a img {
    min-width: 36px;
    max-width: 40px;
  }
}
@media screen and (max-width: 500px) {
  .cover-wrapper .list-h a img {
    margin: 2px 4px;
    min-width: 32px;
    max-width: 36px;
  }
}
@media screen and (max-width: 375px) {
  .cover-wrapper .list-h a img {
    min-width: 28px;
    max-width: 32px;
  }
}
.cover-wrapper {
  max-width: 100%;
}
.cover-wrapper.search .bottom .menu {
  margin-top: 16px;
}
.cover-wrapper.search .bottom .menu .list-h a {
  white-space: nowrap;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  align-items: baseline;
  padding: 2px;
  margin: 4px;
  color: var(--color-site-inner);
  opacity: 0.75;
  -webkit-opacity: 0.75;
  -moz-opacity: 0.75;
  text-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-bottom: 2px solid transparent;
}
.cover-wrapper.search .bottom .menu .list-h a i {
  margin-right: 4px;
}
.cover-wrapper.search .bottom .menu .list-h a p {
  font-size: 0.9375rem;
}
.cover-wrapper.search .bottom .menu .list-h a:hover,
.cover-wrapper.search .bottom .menu .list-h a.active,
.cover-wrapper.search .bottom .menu .list-h a:active {
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  border-bottom: 2px solid var(--color-site-inner);
}
.cover-wrapper.dock .menu,
.cover-wrapper.featured .menu,
.cover-wrapper.focus .menu {
  border-radius: 6px;
  -webkit-border-radius: 6px;
}
.cover-wrapper.dock .menu .list-h a,
.cover-wrapper.featured .menu .list-h a,
.cover-wrapper.focus .menu .list-h a {
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  line-height: 24px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  border-bottom: none;
  text-align: center;
  align-content: flex-end;
  color: rgba(68,68,68,0.7);
  font-size: 1.5rem;
}
@media screen and (max-width: 500px) {
  .cover-wrapper.dock .menu .list-h a,
  .cover-wrapper.featured .menu .list-h a,
  .cover-wrapper.focus .menu .list-h a {
    padding: 12px 8px;
  }
}
.cover-wrapper.dock .menu .list-h a i,
.cover-wrapper.featured .menu .list-h a i,
.cover-wrapper.focus .menu .list-h a i {
  margin: 8px;
}
.cover-wrapper.dock .menu .list-h a p,
.cover-wrapper.featured .menu .list-h a p,
.cover-wrapper.focus .menu .list-h a p {
  font-size: 0.875rem;
}
.cover-wrapper.dock .menu .list-h a.active,
.cover-wrapper.featured .menu .list-h a.active,
.cover-wrapper.focus .menu .list-h a.active {
  background: var(--color-card);
  backdrop-filter: none;
}
.cover-wrapper.dock .menu .list-h a.active i,
.cover-wrapper.featured .menu .list-h a.active i,
.cover-wrapper.focus .menu .list-h a.active i,
.cover-wrapper.dock .menu .list-h a.active i+p,
.cover-wrapper.featured .menu .list-h a.active i+p,
.cover-wrapper.focus .menu .list-h a.active i+p {
  color: #3dd9b6;
}
.cover-wrapper.dock .menu .list-h a.active img+p,
.cover-wrapper.featured .menu .list-h a.active img+p,
.cover-wrapper.focus .menu .list-h a.active img+p {
  color: var(--color-text);
}
.cover-wrapper.dock .menu .list-h a:hover,
.cover-wrapper.featured .menu .list-h a:hover,
.cover-wrapper.focus .menu .list-h a:hover {
  background: var(--color-card);
}
.cover-wrapper.dock .top {
  margin-bottom: 48px;
}
.cover-wrapper.dock .menu {
  background: rgba(255,255,255,0.5);
  position: absolute;
  bottom: 0;
  max-width: 100%;
}
.cover-wrapper.dock .menu .list-h {
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -khtml-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  margin: 4px;
}
.cover-wrapper.dock .menu .list-h a+a {
  margin-left: 4px;
}
@media screen and (max-width: 500px) {
  .cover-wrapper.dock .menu .list-h {
    overflow-x: scroll;
  }
  .cover-wrapper.dock .menu .list-h::-webkit-scrollbar {
    height: 0;
    width: 0;
  }
  .cover-wrapper.dock .menu .list-h::-webkit-scrollbar-track-piece {
    background: transparent;
  }
  .cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb {
    background: #3dd9b6;
    cursor: pointer;
    border-radius: 0;
    -webkit-border-radius: 0;
  }
  .cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb:hover {
    background: #ff5722;
  }
}
@supports (backdrop-filter: blur(20px)) {
  .cover-wrapper.dock .menu {
    background: rgba(255,255,255,0.5);
    backdrop-filter: saturate(200%) blur(20px);
  }
}
@font-face {
  font-family: 'UbuntuMono';
  src: url("https://unpkg.com/volantis-static@0.0.1654736714924/media/fonts/UbuntuMono/UbuntuMono-Regular.ttf");
  font-weight: 'normal';
  font-style: 'normal';
  font-display: swap;
}
@font-face {
  font-family: 'Varela Round';
  src: url("https://unpkg.com/volantis-static@0.0.1654736714924/media/fonts/VarelaRound/VarelaRound-Regular.ttf");
  font-weight: 'normal';
  font-style: 'normal';
  font-display: swap;
}
.l_header {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 64px;
  background: var(--color-card);
  box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 2px 0px rgba(0,0,0,0.1);
}
.l_header.auto {
  transition: opacity 0.4s ease;
  -webkit-transition: opacity 0.4s ease;
  -khtml-transition: opacity 0.4s ease;
  -moz-transition: opacity 0.4s ease;
  -o-transition: opacity 0.4s ease;
  -ms-transition: opacity 0.4s ease;
  visibility: hidden;
}
.l_header.auto.show {
  opacity: 1 !important;
  -webkit-opacity: 1 !important;
  -moz-opacity: 1 !important;
  visibility: visible;
}
.l_header .container {
  margin-left: 16px;
  margin-right: 16px;
}
.l_header #wrapper {
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.l_header #wrapper .nav-main,
.l_header #wrapper .nav-sub {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  -khtml-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -khtml-justify-content: space-between;
  -moz-justify-content: space-between;
  -o-justify-content: space-between;
  -ms-justify-content: space-between;
  align-items: center;
}
.l_header #wrapper .nav-main {
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
.l_header #wrapper.sub .nav-main {
  transform: translateY(-64px);
  -webkit-transform: translateY(-64px);
  -khtml-transform: translateY(-64px);
  -moz-transform: translateY(-64px);
  -o-transform: translateY(-64px);
  -ms-transform: translateY(-64px);
}
.l_header #wrapper .nav-sub {
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
  opacity: 0;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  height: 64px;
  width: calc(100% - 2 * 16px);
  position: absolute;
}
.l_header #wrapper .nav-sub ::-webkit-scrollbar {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
}
@media screen and (min-width: 2048px) {
  .l_header #wrapper .nav-sub {
    max-width: 55vw;
    margin: auto;
  }
}
.l_header #wrapper.sub .nav-sub {
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.l_header #wrapper .title {
  position: relative;
  color: var(--color-text);
  padding-left: 24px;
  max-height: 64px;
}
.l_header #wrapper .nav-main .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  line-height: 64px;
  padding: 0 24px;
  font-size: 1.25rem;
  font-family: "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, Helvetica, monospace;
}
.l_header #wrapper .nav-main .title img {
  height: 64px;
}
.l_header .nav-sub {
  max-width: 1080px;
  margin: auto;
}
.l_header .nav-sub .title {
  font-weight: bold;
  font-family: UbuntuMono, "Varela Round", "PingFang SC", "Microsoft YaHei", Helvetica, Arial, Menlo, Monaco, monospace, sans-serif;
  line-height: 1.2;
  max-height: 64px;
  white-space: normal;
  flex-shrink: 1;
}
.l_header .switcher {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
  line-height: 64px;
  align-items: center;
}
.l_header .switcher .s-toc {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
}
@media screen and (max-width: 768px) {
  .l_header .switcher .s-toc {
    display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
    display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
    display: -ms-flexbox /* TWEENER - IE 10 */;
    display: -webkit-flex /* NEW - Chrome */;
    display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
    display: flex;
  }
}
.l_header .switcher >li {
  height: 48px;
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
  margin: 2px;
}
@media screen and (max-width: 500px) {
  .l_header .switcher >li {
    margin: 0 1px;
    height: 48px;
  }
}
.l_header .switcher >li >a {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  -khtml-justify-content: center;
  -moz-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 0.85em 1.1em;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  border: none;
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
  color: #3dd9b6;
}
.l_header .switcher >li >a:hover {
  border: none;
}
.l_header .switcher >li >a.active,
.l_header .switcher >li >a:active {
  border: none;
  background: var(--color-site-bg);
}
@media screen and (max-width: 500px) {
  .l_header .switcher >li >a {
    width: 36px;
    height: 48px;
  }
}
.l_header .nav-sub .switcher {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
}
.l_header .m_search {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  height: 64px;
  width: 240px;
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
@media screen and (max-width: 1024px) {
  .l_header .m_search {
    width: 44px;
    min-width: 44px;
  }
  .l_header .m_search input::placeholder {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
  }
  .l_header .m_search:hover {
    width: 240px;
  }
  .l_header .m_search:hover input::placeholder {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@media screen and (min-width: 500px) {
  .l_header .m_search:hover .input {
    width: 100%;
  }
  .l_header .m_search:hover .input::placeholder {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
@media screen and (max-width: 500px) {
  .l_header .m_search {
    min-width: 0;
  }
  .l_header .m_search input::placeholder {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
}
.l_header .m_search .form {
  position: relative;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  width: 100%;
  align-items: center;
}
.l_header .m_search .icon {
  position: absolute;
  width: 36px;
  left: 5px;
  color: var(--color-meta);
}
@media screen and (max-width: 500px) {
  .l_header .m_search .icon {
    display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
    display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
    display: none;
  }
}
.l_header .m_search .input {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.3;
  width: 100%;
  color: var(--color-text);
  background: #fafafa;
  box-shadow: none;
  -webkit-box-shadow: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 40px;
  font-size: 0.875rem;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  border: none;
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
@media screen and (min-width: 500px) {
  .l_header .m_search .input:focus {
    box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 4px 8px 0px rgba(0,0,0,0.1);
  }
}
@media screen and (max-width: 500px) {
  .l_header .m_search .input {
    background: var(--color-block);
    padding-left: 8px;
    border: none;
  }
  .l_header .m_search .input:hover,
  .l_header .m_search .input:focus {
    border: none;
  }
}
@media (max-width: 500px) {
  .l_header .m_search {
    left: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    background: #fff;
    transition: all 0.28s ease;
    -webkit-transition: all 0.28s ease;
    -khtml-transition: all 0.28s ease;
    -moz-transition: all 0.28s ease;
    -o-transition: all 0.28s ease;
    -ms-transition: all 0.28s ease;
  }
  .l_header .m_search .input {
    border-radius: 32px;
    -webkit-border-radius: 32px;
    margin-left: 16px;
    padding-left: 16px;
  }
  .l_header.z_search-open .m_search {
    width: 100%;
  }
  .l_header.z_search-open .m_search .input {
    width: calc(100% - 120px);
  }
}
ul.m-pc >li>a {
  color: inherit;
  border-bottom: 2px solid transparent;
}
ul.m-pc >li>a:active,
ul.m-pc >li>a.active {
  border-bottom: 2px solid #3dd9b6;
}
ul.m-pc li:hover >ul.list-v,
ul.list-v li:hover >ul.list-v {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
}
ul.nav-list-h {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: -ms-flexbox /* TWEENER - IE 10 */;
  display: -webkit-flex /* NEW - Chrome */;
  display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
  display: flex;
  align-items: stretch;
}
ul.nav-list-h>li {
  position: relative;
  justify-content: center;
  -webkit-justify-content: center;
  -khtml-justify-content: center;
  -moz-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  height: 100%;
  line-height: 2.4;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
ul.nav-list-h>li >a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
}
ul.list-v {
  z-index: 1;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
  position: absolute;
  background: var(--color-card);
  box-shadow: 0 2px 4px 0px rgba(0,0,0,0.08), 0 4px 8px 0px rgba(0,0,0,0.08), 0 8px 16px 0px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,0.08), 0 4px 8px 0px rgba(0,0,0,0.08), 0 8px 16px 0px rgba(0,0,0,0.08);
  margin-top: -6px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  padding: 8px 0;
}
ul.list-v.show {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
}
ul.list-v hr {
  margin-top: 8px;
  margin-bottom: 8px;
}
ul.list-v >li {
  white-space: nowrap;
  word-break: keep-all;
}
ul.list-v >li.header {
  font-size: 0.78125rem;
  font-weight: bold;
  line-height: 2em;
  color: var(--color-meta);
  margin: 8px 16px 4px;
}
ul.list-v >li.header i {
  margin-right: 8px;
}
ul.list-v >li ul {
  margin-left: 0;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
  margin-top: -40px;
}
ul.list-v .aplayer-container {
  min-height: 64px;
  padding: 6px 16px;
}
ul.list-v >li>a {
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  color: var(--color-list);
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 36px;
  padding: 0 20px 0 16px;
  text-overflow: ellipsis;
  margin: 0 4px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
}
@media screen and (max-width: 1024px) {
  ul.list-v >li>a {
    line-height: 40px;
  }
}
ul.list-v >li>a >i {
  margin-right: 8px;
}
ul.list-v >li>a:active,
ul.list-v >li>a.active {
  color: var(--color-list-hl);
}
ul.list-v >li>a:hover {
  color: var(--color-list-hl);
  background: var(--color-site-bg);
}
.l_header .menu >ul>li>a {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: block;
  padding: 0 8px;
}
.l_header .menu >ul>li>a >i {
  margin-right: 4px;
}
.l_header ul.nav-list-h>li {
  color: var(--color-list);
  line-height: 64px;
}
.l_header ul.nav-list-h>li >a {
  max-height: 64px;
  overflow: hidden;
  color: inherit;
}
.l_header ul.nav-list-h>li >a:active,
.l_header ul.nav-list-h>li >a.active {
  color: #3dd9b6;
}
.l_header ul.nav-list-h>li:hover>a {
  color: var(--color-list-hl);
}
.l_header ul.nav-list-h>li i.music {
  animation: rotate-effect 1.5s linear infinite;
  -webkit-animation: rotate-effect 1.5s linear infinite;
  -khtml-animation: rotate-effect 1.5s linear infinite;
  -moz-animation: rotate-effect 1.5s linear infinite;
  -o-animation: rotate-effect 1.5s linear infinite;
  -ms-animation: rotate-effect 1.5s linear infinite;
}
@-moz-keyframes rotate-effect {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -khtml-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -khtml-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -khtml-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate-effect {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -khtml-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -khtml-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -khtml-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes rotate-effect {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -khtml-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -khtml-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -khtml-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}
@keyframes rotate-effect {
  0% {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -khtml-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -khtml-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -khtml-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -khtml-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}
.menu-phone li ul.list-v {
  right: calc(100% - 0.5 * 16px);
}
.menu-phone li ul.list-v ul {
  right: calc(100% - 0.5 * 16px);
}
#wrapper {
  max-width: 1080px;
  margin: auto;
}
@media screen and (min-width: 2048px) {
  #wrapper {
    max-width: 55vw;
  }
}
#wrapper .menu {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
  margin: 0 16px 0 0;
}
#wrapper .menu .list-v ul {
  left: calc(100% - 0.5 * 16px);
}
.menu-phone {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
  margin-top: 16px;
  right: 8px;
  transition: all 0.28s ease;
  -webkit-transition: all 0.28s ease;
  -khtml-transition: all 0.28s ease;
  -moz-transition: all 0.28s ease;
  -o-transition: all 0.28s ease;
  -ms-transition: all 0.28s ease;
}
.menu-phone ul {
  right: calc(100% - 0.5 * 16px);
}
@media screen and (max-width: 500px) {
  .menu-phone {
    display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
    display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
    display: block;
  }
}
.l_header {
  max-width: 65vw;
  left: calc((100% - 65vw) * 0.5);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
@media screen and (max-width: 2048px) {
  .l_header {
    max-width: 1112px;
    left: calc((100% - 1112px) * 0.5);
  }
}
@media screen and (max-width: 1112px) {
  .l_header {
    left: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    max-width: 100%;
  }
}
@media screen and (max-width: 500px) {
  .l_header .container {
    margin-left: 0;
    margin-right: 0;
  }
  .l_header #wrapper .nav-main .title {
    padding-left: 16px;
    padding-right: 16px;
  }
  .l_header #wrapper .nav-sub {
    width: 100%;
  }
  .l_header #wrapper .nav-sub .title {
    overflow-y: scroll;
    margin-top: 2px;
    padding: 8px 16px;
  }
  .l_header #wrapper .switcher {
    display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
    display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
    display: -ms-flexbox /* TWEENER - IE 10 */;
    display: -webkit-flex /* NEW - Chrome */;
    display: flex /* NEW, Spec - Opera 12.1, Firefox 20+ */;
    display: flex;
    margin-right: 8px;
  }
  .l_header .menu {
    display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
    display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .list-v li {
    max-width: 270px;
  }
}
#u-search {
  display: -webkit-box /* OLD - iOS 6-, Safari 3.1-6 */;
  display: -moz-box /* OLD - Firefox 19- (buggy but mostly works) */;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 60px 20px;
  z-index: 1001;
}
@media screen and (max-width: 680px) {
  #u-search {
    padding: 0px;
  }
}

  </style>
  <link rel="stylesheet" href="/css/style.css" media="print" onload="this.media='all';this.onload=null">
  <noscript><link rel="stylesheet" href="/css/style.css"></noscript>
  
<script>
if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode))
    document.write(
	'<style>'+
		'html{'+
			'overflow-x: hidden !important;'+
			'overflow-y: hidden !important;'+
		'}'+
		'.kill-ie{'+
			'text-align:center;'+
			'height: 100%;'+
			'margin-top: 15%;'+
			'margin-bottom: 5500%;'+
		'}'+
    '.kill-t{'+
      'font-size: 2rem;'+
    '}'+
    '.kill-c{'+
      'font-size: 1.2rem;'+
    '}'+
		'#l_header,#l_body{'+
			'display: none;'+
		'}'+
	'</style>'+
    '<div class="kill-ie">'+
        `<span class="kill-t"><b>Sorry, your browser cannot access this site</b></span><br/>`+
        `<span class="kill-c">Microsoft has terminated support for Internet Explorer (IE) 10 and earlier versions in 2016. <br/>There are great security risks to continue using it. Please use contemporary mainstream browsers to access.</span><br/>`+
        `<a target="_blank" rel="noopener" href="https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/"><strong>Learn more ></strong></a>`+
    '</div>');
</script>


<noscript>
	<style>
		html{
			overflow-x: hidden !important;
			overflow-y: hidden !important;
		}
		.kill-noscript{
			text-align:center;
			height: 100%;
			margin-top: 15%;
			margin-bottom: 5500%;
		}
    .kill-t{
      font-size: 2rem;
    }
    .kill-c{
      font-size: 1.2rem;
    }
		#l_header,#l_body{
			display: none;
		}
	</style>
    <div class="kill-noscript">
        <span class="kill-t"><b>Sorry, your browser cannot access this site</b></span><br/>
        <span class="kill-c">This page requires browser support (enable) JavaScript</span><br/>
        <a target="_blank" rel="noopener" href="https://www.baidu.com/s?wd=启用JavaScript"><strong>Learn more ></strong></a>
    </div>
</noscript>


  <script>
  /************这个文件存放不需要重载的全局变量和全局函数*********/
  window.volantis = {}; // volantis 全局变量
  volantis.debug = "env"; // 调试模式
  volantis.dom = {}; // 页面Dom see: /source/js/app.js etc.

  volantis.GLOBAL_CONFIG ={
    debug: "env",
    cdn: {"js":{"app":"/js/app.js","parallax":"/js/plugins/parallax.js","rightMenu":"/js/plugins/rightMenu.js","rightMenus":"/js/plugins/rightMenus.js","sites":"/js/plugins/tags/sites.js","friends":"/js/plugins/tags/friends.js","contributors":"/js/plugins/tags/contributors.js","search":"/js/search/hexo.js"},"css":{"style":"/css/style.css"}},
    default: {"avatar":"https://unpkg.com/volantis-static@0.0.1654736714924/media/placeholder/avatar/round/3442075.svg","link":"https://unpkg.com/volantis-static@0.0.1654736714924/media/placeholder/link/8f277b4ee0ecd.svg","cover":"https://unpkg.com/volantis-static@0.0.1654736714924/media/placeholder/cover/76b86c0226ffd.svg","image":"https://unpkg.com/volantis-static@0.0.1654736714924/media/placeholder/image/2659360.svg"},
    lastupdate: new Date(1739433735785),
    sidebar: {
      for_page: ["blogger","category","tagcloud","donate"],
      for_post: ["toc"],
      webinfo: {
        lastupd: {
          enable: true,
          friendlyShow: true
        },
        runtime: {
          data: "2020/01/01",
          unit: "天"
        }
      }
    },
    plugins: {
      message: {"enable":true,"css":"https://unpkg.com/volantis-static@0.0.1654736714924/libs/izitoast/dist/css/iziToast.min.css","js":"https://unpkg.com/volantis-static@0.0.1654736714924/libs/izitoast/dist/js/iziToast.min.js","icon":{"default":"fa-solid fa-info-circle light-blue","quection":"fa-solid fa-question-circle light-blue"},"time":{"default":5000,"quection":20000},"position":"topRight","transitionIn":"bounceInLeft","transitionOut":"fadeOutRight","titleColor":"var(--color-text)","messageColor":"var(--color-text)","backgroundColor":"var(--color-card)","zindex":2147483647,"copyright":{"enable":true,"title":"知识共享许可协议","message":"请遵守 CC BY-NC-SA 4.0 协议。","icon":"far fa-copyright light-blue"},"aplayer":{"enable":true,"play":"fa-solid fa-play","pause":"fa-solid fa-pause"},"rightmenu":{"enable":true,"notice":true}},
      fancybox: {"css":"https://unpkg.com/volantis-static@0.0.1654736714924/libs/@fancyapps/ui/dist/fancybox.css","js":"https://unpkg.com/volantis-static@0.0.1654736714924/libs/@fancyapps/ui/dist/fancybox.umd.js"},
      
      
      
    }
  }

  /******************** volantis.EventListener ********************************/
  // 事件监听器 see: /source/js/app.js
  volantis.EventListener = {}
  // 这里存放pjax切换页面时将被移除的事件监听器
  volantis.EventListener.list = []
  //构造方法
  function volantisEventListener(type, f, ele) {
    this.type = type
    this.f = f
    this.ele = ele
  }
  // 移除事件监听器
  volantis.EventListener.remove = () => {
    volantis.EventListener.list.forEach(function (i) {
      i.ele.removeEventListener(i.type, i.f, false)
    })
    volantis.EventListener.list = []
  }
  /******************** volantis.dom.$ ********************************/
  // 注：这里没有选择器，也没有forEach一次只处理一个dom，这里重新封装主题常用的dom方法，返回的是dom对象，对象包含了以下方法，同时保留dom的原生API
  function volantisDom(ele) {
    if (!ele) ele = document.createElement("div")
    this.ele = ele;
    // ==============================================================
    this.ele.find = (c) => {
      let q = this.ele.querySelector(c)
      if (q)
        return new volantisDom(q)
    }
    // ==============================================================
    this.ele.hasClass = (c) => {
      return this.ele.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)'));
    }
    this.ele.addClass = (c) => {
      this.ele.classList.add(c);
      return this.ele
    }
    this.ele.removeClass = (c) => {
      this.ele.classList.remove(c);
      return this.ele
    }
    this.ele.toggleClass = (c) => {
      if (this.ele.hasClass(c)) {
        this.ele.removeClass(c)
      } else {
        this.ele.addClass(c)
      }
      return this.ele
    }
    // ==============================================================
    // 参数 r 为 true 表示pjax切换页面时事件监听器将被移除，false不移除
    this.ele.on = (c, f, r = 1) => {
      this.ele.addEventListener(c, f, false)
      if (r) {
        volantis.EventListener.list.push(new volantisEventListener(c, f, this.ele))
      }
      return this.ele
    }
    this.ele.click = (f, r) => {
      this.ele.on("click", f, r)
      return this.ele
    }
    this.ele.scroll = (f, r) => {
      this.ele.on("scroll", f, r)
      return this.ele
    }
    // ==============================================================
    this.ele.html = (c) => {
      // if(c=== undefined){
      //   return this.ele.innerHTML
      // }else{
      this.ele.innerHTML = c
      return this.ele
      // }
    }
    // ==============================================================
    this.ele.hide = (c) => {
      this.ele.style.display = "none"
      return this.ele
    }
    this.ele.show = (c) => {
      this.ele.style.display = "block"
      return this.ele
    }
    // ==============================================================
    return this.ele
  }
  volantis.dom.$ = (ele) => {
    return !!ele ? new volantisDom(ele) : null;
  }
  /******************** RunItem ********************************/
  function RunItem() {
    this.list = []; // 存放回调函数
    this.start = () => {
      for (var i = 0; i < this.list.length; i++) {
        this.list[i].run();
      }
    };
    this.push = (fn, name, setRequestAnimationFrame = true) => {
      let myfn = fn
      if (setRequestAnimationFrame) {
        myfn = ()=>{
          volantis.requestAnimationFrame(fn)
        }
      }
      var f = new Item(myfn, name);
      this.list.push(f);
    };
    this.remove = (name) =>{
      for (let index = 0; index < this.list.length; index++) {
        const e = this.list[index];
        if (e.name == name) {
          this.list.splice(index,1);
        }
      }
    }
    // 构造一个可以run的对象
    function Item(fn, name) {
      // 函数名称
      this.name = name || fn.name;
      // run方法
      this.run = () => {
        try {
          fn()
        } catch (error) {
          console.log(error);
        }
      };
    }
  }
  /******************** Pjax ********************************/
  // /layout/_plugins/pjax/index.ejs
  // volantis.pjax.send(callBack[,"callBackName"]) 传入pjax:send回调函数
  // volantis.pjax.push(callBack[,"callBackName"]) 传入pjax:complete回调函数
  // volantis.pjax.error(callBack[,"callBackName"]) 传入pjax:error回调函数
  volantis.pjax = {};
  volantis.pjax.method = {
    complete: new RunItem(),
    error: new RunItem(),
    send: new RunItem(),
  };
  volantis.pjax = Object.assign(volantis.pjax, {
    push: volantis.pjax.method.complete.push,
    error: volantis.pjax.method.error.push,
    send: volantis.pjax.method.send.push,
  });
  /******************** RightMenu ********************************/
  // volantis.rightmenu.handle(callBack[,"callBackName"]) 外部菜单项控制
  // 可在 volantis.mouseEvent 处获取右键事件
  volantis.rightmenu = {};
  volantis.rightmenu.method = {
    handle: new RunItem(),
  }
  volantis.rightmenu = Object.assign(volantis.rightmenu, {
    handle: volantis.rightmenu.method.handle.push,
  });
  /********************  Dark Mode  ********************************/
  // /layout/_partial/scripts/darkmode.ejs
  // volantis.dark.mode 当前模式 dark or light
  // volantis.dark.toggle() 暗黑模式触发器
  // volantis.dark.push(callBack[,"callBackName"]) 传入触发器回调函数
  volantis.dark = {};
  volantis.dark.method = {
    toggle: new RunItem(),
  };
  volantis.dark = Object.assign(volantis.dark, {
    push: volantis.dark.method.toggle.push,
  });
  /********************  Message  ********************************/
  // VolantisApp.message
  /********************  isMobile  ********************************/
  // /source/js/app.js
  // volantis.isMobile
  // volantis.isMobileOld
  /********************脚本动态加载函数********************************/
  // volantis.js(src, cb)  cb 可以传入onload回调函数 或者 JSON对象 例如: volantis.js("src", ()=>{}) 或 volantis.js("src", {defer:true,onload:()=>{}})
  // volantis.css(src)

  // 返回Promise对象，如下方法同步加载资源，这利于处理文件资源之间的依赖关系，例如：APlayer 需要在 MetingJS 之前加载
  // (async () => {
  //     await volantis.js("...theme.plugins.aplayer.js.aplayer...")
  //     await volantis.js("...theme.plugins.aplayer.js.meting...")
  // })();

  // 已经加入了setTimeout
  volantis.js = (src, cb) => {
    return new Promise(resolve => {
      setTimeout(function () {
        var HEAD = document.getElementsByTagName("head")[0] || document.documentElement;
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        if (cb) {
          if (JSON.stringify(cb)) {
            for (let p in cb) {
              if (p == "onload") {
                script[p] = () => {
                  cb[p]()
                  resolve()
                }
              } else {
                script[p] = cb[p]
                script.onload = resolve
              }
            }
          } else {
            script.onload = () => {
              cb()
              resolve()
            };
          }
        } else {
          script.onload = resolve
        }
        script.setAttribute("src", src);
        HEAD.appendChild(script);
      });
    });
  }
  volantis.css = (src) => {
    return new Promise(resolve => {
      setTimeout(function () {
        var link = document.createElement('link');
        link.rel = "stylesheet";
        link.href = src;
        link.onload = resolve;
        document.getElementsByTagName("head")[0].appendChild(link);
      });
    });
  }
  /********************按需加载的插件********************************/
  // volantis.import.jQuery().then(()=>{})
  volantis.import = {
    jQuery: () => {
      if (typeof jQuery == "undefined") {
        return volantis.js("https://unpkg.com/volantis-static@0.0.1654736714924/libs/jquery/dist/jquery.min.js")
      } else {
        return new Promise(resolve => {
          resolve()
        });
      }
    }
  }
  /********************** requestAnimationFrame ********************************/
  // 1、requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
  // 2、在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的的 cpu，gpu 和内存使用量。
  volantis.requestAnimationFrame = (fn)=>{
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
    }
    window.requestAnimationFrame(fn)
  }
  /************************ layoutHelper *****************************************/
  volantis.layoutHelper = (helper, html, opt)=>{
    opt = Object.assign({clean:false, pjax:true}, opt)
    function myhelper(helper, html, clean) {
      volantis.tempDiv = document.createElement("div");
      volantis.tempDiv.innerHTML = html;
      let layoutHelper = document.querySelector("#layoutHelper-"+helper)
      if (layoutHelper) {
        if (clean) {
          layoutHelper.innerHTML = ""
        }
        layoutHelper.append(volantis.tempDiv);
      }
    }
    myhelper(helper, html, opt.clean)
    if (opt.pjax) {
      volantis.pjax.push(()=>{
        myhelper(helper, html, opt.clean)
      },"layoutHelper-"+helper)
    }
  }
  /****************************** 滚动事件处理 ****************************************/
  volantis.scroll = {
    engine: new RunItem(),
    unengine: new RunItem(),
  };
  volantis.scroll = Object.assign(volantis.scroll, {
    push: volantis.scroll.engine.push,
  });
  // 滚动条距离顶部的距离
  volantis.scroll.getScrollTop = () =>{
    let scrollPos;
    if (window.pageYOffset) {
      scrollPos = window.pageYOffset;
    } else if (document.compatMode && document.compatMode != 'BackCompat') {
      scrollPos = document.documentElement.scrollTop;
    } else if (document.body) {
      scrollPos = document.body.scrollTop;
    }
    return scrollPos;
  }
  // 使用 requestAnimationFrame 处理滚动事件
  // `volantis.scroll.del` 中存储了一个数值, 该数值检测一定时间间隔内滚动条滚动的位移, 数值的检测频率是浏览器的刷新频率. 数值为正数时, 表示向下滚动. 数值为负数时, 表示向上滚动.
  volantis.scroll.handleScrollEvents = () => {
    volantis.scroll.lastScrollTop = volantis.scroll.getScrollTop()
    function loop() {
      const scrollTop = volantis.scroll.getScrollTop();
      if (volantis.scroll.lastScrollTop !== scrollTop) {
        volantis.scroll.del = scrollTop - volantis.scroll.lastScrollTop;
        volantis.scroll.lastScrollTop = scrollTop;
        // if (volantis.scroll.del > 0) {
        //   console.log("向下滚动");
        // } else {
        //   console.log("向上滚动");
        // }
        // 注销过期的unengine未滚动事件
        volantis.scroll.unengine.list=[]
        volantis.scroll.engine.start();
      }else{
        volantis.scroll.unengine.start();
      }
      volantis.requestAnimationFrame(loop)
    }
    volantis.requestAnimationFrame(loop)
  }
  volantis.scroll.handleScrollEvents()
  volantis.scroll.ele = null;
  // 触发页面滚动至目标元素位置
  volantis.scroll.to = (ele, option = {}) => {
    if (!ele) return;
    volantis.scroll.ele = ele;
    // 默认配置
    opt = {
      top: ele.getBoundingClientRect().top + document.documentElement.scrollTop,
      behavior: "smooth"
    }
    // 定义配置
    if ("top" in option) {
      opt.top = option.top
    }
    if ("behavior" in option) {
      opt.behavior = option.behavior
    }
    if ("addTop" in option) {
      opt.top += option.addTop
    }
    if (!("observerDic" in option)) {
      option.observerDic = 100
    }
    // 滚动
    window.scrollTo(opt);
    // 监视器
    // 监视并矫正元素滚动到指定位置
    // 用于处理 lazyload 引起的 cls 导致的定位失败问题
    // option.observer = false
    if (option.observer) {
      setTimeout(() => {
        if (volantis.scroll.ele != ele) {
          return
        }
        volantis.scroll.unengine.push(() => {
          let me = ele.getBoundingClientRect().top
          if(!(me >= -option.observerDic && me <= option.observerDic)){
            volantis.scroll.to(ele, option)
          }
          volantis.scroll.unengine.remove("unengineObserver")
        },"unengineObserver")
      },1000)
    }
  }
  /********************** Content Visibility ********************************/
  // 见 source/css/first.styl 如果遇到任何问题 删除 .post-story 即可
  // 一个元素被声明 content-visibility 属性后 如果元素不在 viewport 中 浏览器不会计算其后代元素样式和属性 从而节省 Style & Layout 耗时
  // content-visibility 的副作用: 锚点失效 等等(实验初期 暂不明确), 使用此方法清除样式
  volantis.cleanContentVisibility = ()=>{
    if (document.querySelector(".post-story")) {
      console.log("cleanContentVisibility");
      document.querySelectorAll(".post-story").forEach(e=>{
        e.classList.remove("post-story")
      })
    }
  }
  /******************************************************************************/
  /******************************************************************************/
  /******************************************************************************/
  //图像加载出错时的处理
  function errorImgAvatar(img) {
    img.src = "https://unpkg.com/volantis-static@0.0.1654736714924/media/placeholder/avatar/round/3442075.svg";
    img.onerror = null;
  }
  function errorImgCover(img) {
    img.src = "https://unpkg.com/volantis-static@0.0.1654736714924/media/placeholder/cover/76b86c0226ffd.svg";
    img.onerror = null;
  }
  /******************************************************************************/
</script>

  <!-- import head_end begin -->
  <!-- import head_end end -->
  <!-- Custom Files headEnd begin-->
  
  <!-- Custom Files headEnd end-->
  <!-- front-matter head_end begin -->
  <!-- front-matter head_end end -->
</head>
  <body itemscope itemtype="http://schema.org/WebPage">
    <!-- import body_begin begin-->
    <!-- import body_begin end-->
    <!-- Custom Files bodyBegin begin-->
    
    <!-- Custom Files bodyBegin end-->
    <!-- front-matter body_begin begin -->
    <!-- front-matter body_begin end -->
    <header itemscope itemtype="http://schema.org/WPHeader" id="l_header" class="l_header auto shadow floatable blur show" style='opacity: 0' >
  <div class='container'>
  <div id='wrapper'>
    <div class='nav-sub'>
      <p class="title"></p>
      <ul class='switcher nav-list-h m-phone' id="pjax-header-nav-list">
        <li><a id="s-comment" class="fa-solid fa-comments fa-fw" target="_self"  href="/" onclick="return false;" title="comment"></a></li>
        
          <li><a id="s-toc" class="s-toc fa-solid fa-list fa-fw" target="_self"  href="/" onclick="return false;" title="toc"></a></li>
        
      </ul>
    </div>
		<div class="nav-main">
      
        
        <a class="title flat-box" target="_self" href='/'>
          
            <img no-lazy class='logo' src='https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/Logo-NavBar@3x.png'/>
          
          
          
        </a>
      

			<div class='menu navigation'>
				<ul class='nav-list-h m-pc'>
          
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/" title="博客"
                  
                  
                  
                    active-action="action-home"
                  >
                  <i class='fa-solid fa-rss fa-fw'></i>博客
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/categories/" title="分类"
                  
                  
                  
                    active-action="action-categories"
                  >
                  <i class='fa-solid fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/tags/" title="标签"
                  
                  
                  
                    active-action="action-tags"
                  >
                  <i class='fa-solid fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/archives/" title="归档"
                  
                  
                  
                    active-action="action-archives"
                  >
                  <i class='fa-solid fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/friends/" title="友链"
                  
                  
                  
                    active-action="action-friends"
                  >
                  <i class='fa-solid fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/about/" title="关于"
                  
                  
                  
                    active-action="action-about"
                  >
                  <i class='fa-solid fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
          
				</ul>
			</div>
      
      <div class="m_search">
        <form name="searchform" class="form u-search-form">
          <i class="icon fa-solid fa-search fa-fw"></i>
          <input type="text" class="input u-search-input" placeholder="Search..." />
        </form>
      </div>
      

			<ul class='switcher nav-list-h m-phone'>
				
					<li><a class="s-search fa-solid fa-search fa-fw" target="_self" href="/" onclick="return false;" title="search"></a></li>
				
				<li>
          <a class="s-menu fa-solid fa-bars fa-fw" target="_self" href="/" onclick="return false;" title="menu"></a>
          <ul class="menu-phone list-v navigation white-box">
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/" title="博客"
                  
                  
                  
                    active-action="action-home"
                  >
                  <i class='fa-solid fa-rss fa-fw'></i>博客
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/categories/" title="分类"
                  
                  
                  
                    active-action="action-categories"
                  >
                  <i class='fa-solid fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/tags/" title="标签"
                  
                  
                  
                    active-action="action-tags"
                  >
                  <i class='fa-solid fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/archives/" title="归档"
                  
                  
                  
                    active-action="action-archives"
                  >
                  <i class='fa-solid fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/friends/" title="友链"
                  
                  
                  
                    active-action="action-friends"
                  >
                  <i class='fa-solid fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box faa-parent animated-hover"
                href="/about/" title="关于"
                  
                  
                  
                    active-action="action-about"
                  >
                  <i class='fa-solid fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
            
          </ul>
        </li>
			</ul>

      <!-- Custom Files header begin -->
      
      <!-- Custom Files header end -->
		</div>
	</div>
  </div>
</header>

    <div id="l_body">
      <div id="l_cover">
  
    
      <!-- see: /layout/_partial/scripts/_ctrl/coverCtrl.ejs -->
      <div id="none" class='cover-wrapper post dock' style="display: none;">
        
  <div class='cover-bg lazyload placeholder' data-bg="https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg"></div>

<div class='cover-body'>
  <div class='top'>
    
    
      <p class="title">Volantis</p>
    
    
  </div>
  <div class='bottom'>
    <div class='menu navigation'>
      <div class='list-h'>
        
          
            <a href="/v4/getting-started/"
              
              
              active-action="action-v4getting-started">
              <img src='https://unpkg.com/volantis-static@0.0.1654736714924/media/twemoji/assets/svg/1f5c3.svg'><p>文档</p>
            </a>
          
            <a href="/faqs/"
              
              
              active-action="action-faqs">
              <img src='https://unpkg.com/volantis-static@0.0.1654736714924/media/twemoji/assets/svg/1f516.svg'><p>帮助</p>
            </a>
          
            <a href="/examples/"
              
              
              active-action="action-examples">
              <img src='https://unpkg.com/volantis-static@0.0.1654736714924/media/twemoji/assets/svg/1f396.svg'><p>示例</p>
            </a>
          
            <a href="/contributors/"
              
              
              active-action="action-contributors">
              <img src='https://unpkg.com/volantis-static@0.0.1654736714924/media/twemoji/assets/svg/1f389.svg'><p>社区</p>
            </a>
          
            <a href="/archives/"
              
              
              active-action="action-archives">
              <img src='https://unpkg.com/volantis-static@0.0.1654736714924/media/twemoji/assets/svg/1f4f0.svg'><p>博客</p>
            </a>
          
            <a target="_blank" rel="noopener" href="https://github.com/volantis-x/hexo-theme-volantis/"
              
              
              active-action="action-https:githubcomvolantis-xhexo-theme-volantis">
              <img src='https://unpkg.com/volantis-static@0.0.1654736714924/media/twemoji/assets/svg/1f9ec.svg'><p>源码</p>
            </a>
          
        
      </div>
    </div>
  </div>
</div>

        <div id="scroll-down" style="display: none;"><i class="fa fa-chevron-down scroll-down-effects"></i></div>
      </div>
    
  
</div>

      <div id="safearea">
        <div class="body-wrapper">
          
<div id="l_main" class=''>
  <article itemscope itemtype="http://schema.org/Article" class="article post white-box reveal md shadow floatable blur article-type-post" id="post" itemscope itemprop="blogPost">
  <link itemprop="mainEntityOfPage" href="http://example.com/2023/12/18/Array/">
  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="Knowledge">
  </span>
  <span hidden itemprop="post" itemscope itemtype="http://schema.org/Post">
    <meta itemprop="name" content="Knowledge">
    <meta itemprop="description" content="html css node vue node">
  </span>
  


  
    <span hidden>
      <meta itemprop="image" content="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png">
    </span>
  
  <div class="article-meta" id="top">
    
    
    
      <h1 class="title" itemprop="name headline">
        Array
      </h1>
      <div class='new-meta-box'>
        
          
            
<div class='new-meta-item author' itemprop="author" itemscope itemtype="http://schema.org/Person">
  <a itemprop="url" class='author' href="/" rel="nofollow">
    <img itemprop="image" src="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/apple-touch-icon.png" class="lazyload" data-srcset="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/apple-touch-icon.png" srcset="">
    <p itemprop="name">请设置文章作者</p>
  </a>
</div>

          
        
          
            

          
        
          
            <div class="new-meta-item date" itemprop="dateCreated datePublished" datetime="2023-12-18T09:56:49+08:00">
  <a class='notlink'>
    <i class="fa-solid fa-calendar-alt fa-fw" aria-hidden="true"></i>
    <p>发布于：Dec 18, 2023</p>
  </a>
</div>

          
        
          
            



          
        
        <!-- Custom Files topMeta begin-->
        
        <!-- Custom Files topMeta end-->
      </div>
    
  </div>


  <div id="layoutHelper-page-plugins"></div>
  <div id="post-body" itemprop="articleBody">
    <h2 id="reduce-方法"><a href="#reduce-方法" class="headerlink" title="reduce()方法"></a>reduce()方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// reduce（）方法为归并类方法，最常用的场景就是，计算数组中的每一项的总和</span></span><br><span class="line"><span class="comment">// reduce（）方法会遍历数组的每一项，它接收两个参数：</span></span><br><span class="line"><span class="comment">// 第一个参数：每次遍历都会调用的函数，而这个函数有接收四个参数，分别是：前一个值、当前值、项目的索引和数组对象，</span></span><br><span class="line"><span class="comment">// 而这个函数的返回值，回传给下一次遍历时，执行的这个方法的第一个参数。</span></span><br><span class="line"><span class="comment">// 第二个参数：归并基础的初始值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 求数组项最大值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">7</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>].<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> <span class="title class_">Math</span>.<span class="title function_">max</span>(pre, cur)));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组里所有值的和</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>].<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> pre + cur));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 操作数组对象</span></span><br><span class="line"><span class="keyword">const</span> arrObj = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">num</span>: <span class="number">11</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">num</span>: <span class="number">22</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">num</span>: <span class="number">33</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="comment">// 累加数组中对象的值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrObj.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> pre + cur.<span class="property">num</span>, <span class="number">0</span>));</span><br><span class="line"><span class="comment">// 求数组中对象中的最大值</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrObj.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> <span class="title class_">Math</span>.<span class="title function_">max</span>(pre, cur.<span class="property">num</span>), <span class="number">0</span>));</span><br><span class="line"><span class="comment">// 求数组中对象中的最大值所对应的对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  arrObj.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> (!pre || cur.<span class="property">num</span> &gt; pre.<span class="property">num</span> ? cur : pre), <span class="literal">null</span>)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 将二维数组转为一维数组</span></span><br><span class="line"><span class="keyword">const</span> arrArr = [</span><br><span class="line">  [<span class="number">0</span>, <span class="number">1</span>],</span><br><span class="line">  [<span class="number">2</span>, <span class="number">3</span>],</span><br><span class="line">  [<span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrArr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> pre.<span class="title function_">concat</span>(cur), []));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrArr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> [...pre, ...cur], []));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 计算数组中每个元素出现的次数</span></span><br><span class="line"><span class="keyword">const</span> arr2 = [<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;c&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  arr2.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> &#123;</span><br><span class="line">    cur <span class="keyword">in</span> pre ? pre[cur]++ : (pre[cur] = <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">return</span> pre;</span><br><span class="line">  &#125;, &#123;&#125;)</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 按属性对object分类</span></span><br><span class="line"><span class="keyword">const</span> people = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;tom&#x27;</span>, <span class="attr">age</span>: <span class="number">17</span>, <span class="attr">birthYear</span>: <span class="string">&#x27;2021&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;tony&#x27;</span>, <span class="attr">age</span>: <span class="number">21</span>, <span class="attr">birthYear</span>: <span class="string">&#x27;2021&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span>, <span class="attr">birthYear</span>: <span class="string">&#x27;2020&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span>, <span class="attr">birthYear</span>: <span class="string">&#x27;2021&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;bob&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span>, <span class="attr">birthYear</span>: <span class="string">&#x27;2019&#x27;</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">groupBy</span>(<span class="params">arr, property</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (!<span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr)) <span class="keyword">return</span> [];</span><br><span class="line">  <span class="keyword">return</span> arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, obj</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> newObj = &#123; [property]: obj[property], <span class="attr">data</span>: [obj] &#125;;</span><br><span class="line">    <span class="keyword">if</span> (!pre.<span class="property">length</span>) <span class="keyword">return</span> [newObj];</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; pre.<span class="property">length</span>; i++) &#123;</span><br><span class="line">      <span class="keyword">let</span> item = pre[i];</span><br><span class="line">      <span class="keyword">if</span> (item[property] === obj[property]) &#123;</span><br><span class="line">        item.<span class="property">data</span> = [...item.<span class="property">data</span>, obj];</span><br><span class="line">        <span class="keyword">return</span> pre;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> [...pre, newObj];</span><br><span class="line">  &#125;, []);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">groupBy</span>(people, <span class="string">&#x27;birthYear&#x27;</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">groupBy</span>(people, <span class="string">&#x27;age&#x27;</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组去重</span></span><br><span class="line"><span class="keyword">const</span> arr3 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="literal">null</span>, <span class="literal">null</span>, <span class="number">0</span>, <span class="literal">false</span>, <span class="literal">false</span>, <span class="literal">true</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  arr3.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, cur</span>) =&gt;</span> (pre.<span class="title function_">includes</span>(cur) ? pre : pre.<span class="title function_">concat</span>(cur)), [])</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 转换成 &#123;a: &#x27;a&#x27;,b: &#x27;b&#x27;, c: &#x27;c&#x27;&#125;</span></span><br><span class="line"><span class="keyword">const</span> arr = [</span><br><span class="line">  &#123; <span class="attr">key</span>: <span class="string">&#x27;a&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;a&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">key</span>: <span class="string">&#x27;b&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;b&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">key</span>: <span class="string">&#x27;c&#x27;</span>, <span class="attr">value</span>: <span class="string">&#x27;c&#x27;</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  arr.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, &#123; key, value &#125;</span>) =&gt;</span> &#123;</span><br><span class="line">    pre[key] = value;</span><br><span class="line">    <span class="keyword">return</span> pre;</span><br><span class="line">  &#125;, &#123;&#125;)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h2 id="sort-方法"><a href="#sort-方法" class="headerlink" title="sort()方法"></a>sort()方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// sort 方法 会改变原数组</span></span><br><span class="line"><span class="comment">// 1.语法 arr.sort([compareFunction])</span></span><br><span class="line"><span class="comment">// 2.参数 compareFunction可选</span></span><br><span class="line"><span class="comment">// 用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。</span></span><br><span class="line"><span class="comment">// a,b 两个将要被比较的元素。</span></span><br><span class="line"><span class="comment">// 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前。</span></span><br><span class="line"><span class="comment">// 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。</span></span><br><span class="line"><span class="comment">// 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。</span></span><br><span class="line"><span class="comment">// 3.返回值排序后的数组。请注意，数组已原地排序，并且不进行复制。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.未指明compareFunction, 那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="number">15</span>, <span class="number">68</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">89</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(), arr); <span class="comment">// [15, 2, 3, 68, 89]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序</span></span><br><span class="line"><span class="comment">// a.比较数字而非字符串，可以简单的以a和b的结果排序，a - b 升序 b - a 降序</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a - b)); <span class="comment">// [2, 3, 15, 68, 89] 升序</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> b - a)); <span class="comment">// [89, 68, 15, 3, 2] 降序</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// b.字符串排序，可直接使用sort()方法</span></span><br><span class="line"><span class="keyword">var</span> arr = [<span class="string">&#x27;h&#x27;</span>, <span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;k&#x27;</span>, <span class="string">&#x27;c&#x27;</span>, <span class="string">&#x27;e&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(), arr); <span class="comment">// [&quot;a&quot;, &quot;c&quot;, &quot;e&quot;, &quot;h&quot;, &quot;k&quot;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// c.依据对象的某个属性排序</span></span><br><span class="line"><span class="keyword">var</span> arr = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;Edward&#x27;</span>, <span class="attr">age</span>: <span class="number">21</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;And&#x27;</span>, <span class="attr">age</span>: <span class="number">45</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;The&#x27;</span>, <span class="attr">age</span>: -<span class="number">12</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a.<span class="property">age</span> - b.<span class="property">age</span>)); <span class="comment">// 依据age排序</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  arr.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> (a.<span class="property">name</span> &lt; b.<span class="property">name</span> ? -<span class="number">1</span> : a.<span class="property">name</span> &gt; b.<span class="property">name</span> ? <span class="number">1</span> : <span class="number">0</span>))</span><br><span class="line">); <span class="comment">// 依据name排序 字母顺序</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// d.非ASCII字符排序(如类似 e, é, è, a, ä 等字符的字符串),一些非英语语言的字符串需要使用 String.localeCompare。</span></span><br><span class="line"><span class="keyword">var</span> items = [<span class="string">&#x27;réservé&#x27;</span>, <span class="string">&#x27;premier&#x27;</span>, <span class="string">&#x27;cliché&#x27;</span>, <span class="string">&#x27;communiqué&#x27;</span>, <span class="string">&#x27;café&#x27;</span>, <span class="string">&#x27;adieu&#x27;</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(items.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> a.<span class="title function_">localeCompare</span>(b)));</span><br><span class="line"><span class="comment">// [&quot;adieu&quot;, &quot;café&quot;, &quot;cliché&quot;, &quot;communiqué&quot;, &quot;premier&quot;, &quot;réservé&quot;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// e.使用映射改善排序</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">mappedSort</span>(<span class="params">list</span>) &#123;   </span><br><span class="line">  <span class="comment">// 对需要排序的数字和位置的临时存储</span></span><br><span class="line">  <span class="keyword">const</span> mapped = list.<span class="title function_">map</span>(<span class="function">(<span class="params">el, i</span>) =&gt;</span> (&#123; <span class="attr">index</span>: i, <span class="attr">value</span>: el.<span class="title function_">toLowerCase</span>() &#125;));</span><br><span class="line">  <span class="comment">// 按照多个值排序数组</span></span><br><span class="line">  mapped.<span class="title function_">sort</span>(<span class="function">(<span class="params">a, b</span>) =&gt;</span> +(a.<span class="property">value</span> &gt; b.<span class="property">value</span>) || +(a.<span class="property">value</span> === b.<span class="property">value</span>) - <span class="number">1</span>);</span><br><span class="line">  <span class="comment">// 根据索引得到排序的结果</span></span><br><span class="line">  <span class="keyword">return</span> mapped.<span class="title function_">map</span>(<span class="function"><span class="params">el</span> =&gt;</span> list[el.<span class="property">index</span>]);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">mappedSort</span>([<span class="string">&#x27;Delta&#x27;</span>, <span class="string">&#x27;alpha&#x27;</span>, <span class="string">&#x27;CHARLIE&#x27;</span>, <span class="string">&#x27;fast&#x27;</span>]));</span><br><span class="line"><span class="comment">// [&#x27;alpha&#x27;, &#x27;CHARLIE&#x27;, &#x27;Delta&#x27;, &#x27;fast&#x27;]</span></span><br></pre></td></tr></table></figure>

<h2 id="Array-from"><a href="#Array-from" class="headerlink" title="Array.from()"></a>Array.from()</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Array.from()方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例</span></span><br><span class="line"><span class="comment">// Array.from(arrayLike, [,mapFn[,thisArg]])</span></span><br><span class="line"><span class="comment">// arrayLike：想要转换成数组的伪数组对象或可迭代对象。</span></span><br><span class="line"><span class="comment">// mapFn 可选：如果指定了该参数，新数组中的每个元素会执行该回调函数。</span></span><br><span class="line"><span class="comment">// thisArg 可选：可选参数，执行回调函数 mapFn 时 this 对象。</span></span><br><span class="line"><span class="comment">// 返回值：一个新的数组实例。</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1、用字符串生成数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="string">&#x27;foo&#x27;</span>)); <span class="comment">// [&#x27;f&#x27;, &#x27;o&#x27;, &#x27;o&#x27;]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、在Array.from中使用箭头函数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], <span class="function"><span class="params">x</span> =&gt;</span> x + x)); <span class="comment">// [2, 4, 6]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、将对象转换数组</span></span><br><span class="line"><span class="comment">// 请注意：object中必须有length属性，返回的数组长度取决于length长度；可以必须是数组</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="number">0</span>: <span class="string">&#x27;w&#x27;</span>, <span class="number">1</span>: <span class="string">&#x27;j&#x27;</span>, <span class="number">2</span>: <span class="string">&#x27;t&#x27;</span>, <span class="attr">length</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(obj)); <span class="comment">// [&#x27;w&#x27;, &#x27;j&#x27;, &#x27;t&#x27;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(&#123; <span class="attr">length</span>: <span class="number">2</span> &#125;)); <span class="comment">// [undefined, undefined]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、将类数组转换成数组</span></span><br><span class="line"><span class="comment">// 平时会碰到的类数组对象有：函数中的arguments关键字，或者是一个DOM集合</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sumArguments</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="variable language_">arguments</span>).<span class="title function_">reduce</span>(<span class="function">(<span class="params">sum, num</span>) =&gt;</span> sum + num, <span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sumArguments</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>)); <span class="comment">// 6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 第一个参数可以是任意一个可迭代对象</span></span><br><span class="line"><span class="comment">// 数组去重</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>([<span class="string">&#x27;w&#x27;</span>, <span class="string">&#x27;j&#x27;</span>, <span class="string">&#x27;t&#x27;</span>, <span class="string">&#x27;t&#x27;</span>]))); <span class="comment">// [&#x27;w&#x27;, &#x27;j&#x27;, &#x27;t&#x27;]</span></span><br><span class="line"><span class="keyword">const</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line">map.<span class="title function_">set</span>(<span class="string">&#x27;w&#x27;</span>, <span class="number">1</span>).<span class="title function_">set</span>(<span class="string">&#x27;j&#x27;</span>, <span class="number">2</span>).<span class="title function_">set</span>(<span class="string">&#x27;t&#x27;</span>, <span class="number">3</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(map)); <span class="comment">// [ [&#x27;w&#x27;, 1], [&#x27;j&#x27;, 2], [&#x27;t&#x27;, 3] ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 生成数字范围</span></span><br><span class="line"><span class="comment">// 在 range() 函数中，Array.from() 提供了类似数组的 &#123;length：length&#125; ，以及一个简单地返回当前索引的 map 函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">range</span>(<span class="params">length</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">from</span>(&#123; length &#125;, <span class="function">(<span class="params">_, index</span>) =&gt;</span> index);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">range</span>(<span class="number">4</span>)); <span class="comment">// [0, 1, 2, 3]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用对象填充数组</span></span><br><span class="line"><span class="comment">// 由 Array.from 返回的 resultA 使用不同空对象实例进行初始化。</span></span><br><span class="line"><span class="comment">// 之所以发生这种情况是因为每次调用时，mapFunction，即此处的() =&gt; (&#123;&#125;) 都会返回一个新的对象。</span></span><br><span class="line"><span class="comment">// 然后，fill() 方法创建的 resultB 使用相同的空对象实例进行初始化。不会跳过空项。</span></span><br><span class="line"><span class="keyword">const</span> length = <span class="number">3</span>;</span><br><span class="line"><span class="keyword">const</span> resultA = <span class="title class_">Array</span>.<span class="title function_">from</span>(&#123; length &#125;, <span class="function">() =&gt;</span> (&#123;&#125;));</span><br><span class="line"><span class="keyword">const</span> resultB = <span class="title class_">Array</span>(length).<span class="title function_">fill</span>(&#123;&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(resultA, resultB); <span class="comment">// [&#123;&#125;, &#123;&#125;, &#123;&#125;], [&#123;&#125;, &#123;&#125;, &#123;&#125;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(resultA[<span class="number">0</span>] === resultA[<span class="number">1</span>], resultB[<span class="number">0</span>] === resultB[<span class="number">1</span>]); <span class="comment">// false true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用值填充数组</span></span><br><span class="line"><span class="keyword">const</span> length1 = <span class="number">3</span>,</span><br><span class="line">  init = <span class="number">0</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(&#123; <span class="attr">length</span>: length1 &#125;, <span class="function">() =&gt;</span> init)); <span class="comment">// [0, 0, 0]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>(length1).<span class="title function_">fill</span>(init)); <span class="comment">// [0, 0, 0]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 克隆数组 Array.from() 可以很容易的实现数组的浅拷贝</span></span><br><span class="line"><span class="comment">// 意味着虽然 numbers 和 numbersCopy 有着相同的项，但是它们是不同的数组对象</span></span><br><span class="line"><span class="keyword">const</span> numbers = [<span class="number">3</span>, <span class="number">6</span>, <span class="number">9</span>];</span><br><span class="line"><span class="keyword">const</span> numbersCopy = <span class="title class_">Array</span>.<span class="title function_">from</span>(numbers);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(numbers === numbersCopy); <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// recursiveClone() 能够对数组的深拷贝，通过判断 数组的 item 是否是一个数组，</span></span><br><span class="line"><span class="comment">// 如果是数组，就继续调用 recursiveClone() 来实现了对数组的深拷贝。</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">recursiveClone</span>(<span class="params">val</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">isArray</span>(val) ? <span class="title class_">Array</span>.<span class="title function_">from</span>(val, recursiveClone) : val;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> numberArr = [</span><br><span class="line">  [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>],</span><br><span class="line">  [<span class="string">&#x27;one&#x27;</span>, <span class="string">&#x27;two&#x27;</span>, <span class="string">&#x27;three&#x27;</span>]</span><br><span class="line">];</span><br><span class="line"><span class="keyword">const</span> numberArrClone = <span class="title function_">recursiveClone</span>(numberArr);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(numberArrClone); <span class="comment">// [[0, 1, 2], [&#x27;one&#x27;, &#x27;two&#x27;, &#x27;three&#x27;]]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(numberArr[<span class="number">0</span>] === numberArrClone[<span class="number">0</span>]); <span class="comment">// false</span></span><br></pre></td></tr></table></figure>


<h2 id="Array-fill"><a href="#Array-fill" class="headerlink" title="Array.fill()"></a>Array.fill()</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// fill()方法用一个固定值填充一个数组中从其实索引到中终止索引内的全部元素，不包括终止索引。</span></span><br><span class="line"><span class="comment">// 语法：arr.fill(value,start,end)</span></span><br><span class="line"><span class="comment">// value: 用来填充数组元素的值</span></span><br><span class="line"><span class="comment">// start: 起始索引，默认值为0</span></span><br><span class="line"><span class="comment">// end: 终止索引，默认值为this.length,如果不填的话，就包括终止索引</span></span><br><span class="line"><span class="comment">// 注: 1.返回修改后的数组</span></span><br><span class="line"><span class="comment">// 2.如果start为负数，则开始索引被计算为length+start</span></span><br><span class="line"><span class="comment">// 3.如果end为负数，则结束索引被计算为length+end</span></span><br><span class="line"><span class="comment">// 4.start和end参数是可选的，默认值分别为0和arr.length</span></span><br><span class="line"><span class="comment">// 5.当一个对象被传递给fill方法时，填充数组的是这个对象的引用</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1、value：它定义了将替换数组元素的静态值</span></span><br><span class="line"><span class="comment">// 2、start(Optional)：它定义了从静态索引中填充数组的起始索引。</span></span><br><span class="line"><span class="comment">// 如果未定义此值，则起始索引为0。如果start为负，则净起始索引为length+start</span></span><br><span class="line"><span class="comment">// 3、end(Optional)：此参数定义将要用静态值填充数组的最后一个索引。如果未定义此值，</span></span><br><span class="line"><span class="comment">// 则默认情况下将arr.length-1的最后一个索引作为结束值。如果末端为负，则净末端定义为长度+末端。</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="comment">// 从索引0开始，到索引2结束，不包括终止索引，将值替换为4</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">fill</span>(<span class="number">0</span>, <span class="number">2</span>, <span class="number">4</span>)); <span class="comment">//[1,2,0,0]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">fill</span>(<span class="number">5</span>, <span class="number">1</span>)); <span class="comment">// [1,5,5,5]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">fill</span>(<span class="number">6</span>)); <span class="comment">// [6,6,6,6]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 示例</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>)); <span class="comment">// [4, 4, 4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, <span class="number">1</span>)); <span class="comment">// [1, 4, 4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, <span class="number">1</span>, <span class="number">2</span>)); <span class="comment">// [1, 4, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, <span class="number">1</span>, <span class="number">1</span>)); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, <span class="number">3</span>, <span class="number">3</span>)); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, -<span class="number">3</span>, -<span class="number">2</span>)); <span class="comment">// [4, 2, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, <span class="title class_">NaN</span>, <span class="title class_">NaN</span>)); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>, <span class="number">3</span>, <span class="number">5</span>)); <span class="comment">// [1, 2, 3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].<span class="title function_">fill</span>(<span class="number">4</span>)); <span class="comment">// [4, 4, 4]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// A.call(B,x,y) =&gt; 就是把A的函数放到B中去运行，x,y是A方法的参数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([].<span class="property">fill</span>.<span class="title function_">call</span>(&#123; <span class="attr">length</span>: <span class="number">3</span> &#125;, <span class="number">4</span>)); <span class="comment">// &#123;0: 4, 1: 4, 2: 4, length: 3&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>(<span class="number">3</span>).<span class="title function_">fill</span>(&#123;&#125;)); <span class="comment">// [&#123;&#125;, &#123;&#125;, &#123;&#125;];</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>(<span class="number">9</span>).<span class="title function_">fill</span>(<span class="literal">null</span>)); <span class="comment">// [ 9个null ]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 需要注意如果fill的参数为引用类型，会导致都执行同一个引用类型</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr[<span class="number">0</span>] === arr[<span class="number">1</span>]); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// fill填入的是一个静态值，最好不要填引用数据类型，否则填入的其实都是同一个对象</span></span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">3</span>).<span class="title function_">fill</span>(<span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">3</span>).<span class="title function_">fill</span>(<span class="number">0</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// [[0,0,0],[0,0,0],[0,0,0]]</span></span><br><span class="line">a[<span class="number">0</span>][<span class="number">0</span>] = <span class="number">1</span>; <span class="comment">// 上面的也会变</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">// [[1,0,0],[1,0,0],[1,0,0]]</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="Array-map"><a href="#Array-map" class="headerlink" title="Array.map()"></a>Array.map()</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// map()方法 按照某种映射关系，把数组的每一个元素给修改了</span></span><br><span class="line"><span class="comment">// 不会对空数组进行检测，不会改变原始数组</span></span><br><span class="line"><span class="comment">// 但是 ！！！</span></span><br><span class="line"><span class="comment">// 1、数组的值是基本类型时，map不会改变原有数据</span></span><br><span class="line"><span class="comment">// 2、数组的值是引用类型时（对象），map会修改数组的值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 求数组中的每个元素的平方根 数组里面改为字符串型，数组里面改为数字型</span></span><br><span class="line"><span class="keyword">const</span> arrMap = [<span class="number">1</span>, <span class="number">4</span>, <span class="number">9</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrMap.<span class="title function_">map</span>(<span class="title class_">Math</span>.<span class="property">sqrt</span>)); <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrMap.<span class="title function_">map</span>(<span class="title class_">String</span>)); <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arrMap.<span class="title function_">map</span>(<span class="title class_">Number</span>)); <span class="comment">// [1,2,3]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用map重新格式化数组中的对象 不改变原数组</span></span><br><span class="line"><span class="keyword">const</span> kvArray = [</span><br><span class="line">  &#123; <span class="attr">key</span>: <span class="number">1</span>, <span class="attr">value</span>: <span class="number">10</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">key</span>: <span class="number">2</span>, <span class="attr">value</span>: <span class="number">20</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">key</span>: <span class="number">3</span>, <span class="attr">value</span>: <span class="number">30</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="keyword">const</span> reformattedArray = kvArray.<span class="title function_">map</span>(<span class="function">(<span class="params">&#123; key, value &#125;</span>) =&gt;</span> (&#123; [key]: value &#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(reformattedArray, <span class="string">&#x27;reformattedArray&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(kvArray, <span class="string">&#x27;kvArray&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在一个String上使用map方法获取字符串中每个字符所对应的ASCII码组成的数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">map</span>.<span class="title function_">call</span>(<span class="string">&#x27;Hello World&#x27;</span>, <span class="function"><span class="params">x</span> =&gt;</span> x.<span class="title function_">charCodeAt</span>(<span class="number">0</span>)),</span><br><span class="line">  <span class="string">&#x27;String使用map方法&#x27;</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 用map方法反转字符串</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">map</span></span><br><span class="line">    .<span class="title function_">call</span>(<span class="string">&#x27;12345&#x27;</span>, <span class="function"><span class="params">x</span> =&gt;</span> x)</span><br><span class="line">    .<span class="title function_">reverse</span>()</span><br><span class="line">    .<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>),</span><br><span class="line">  <span class="string">&#x27;用map方法反转字符串&#x27;</span></span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 通常情况下，map方法中的callback函数只需要接受一个参数，就是正在被遍历的数组元素本身。</span></span><br><span class="line"><span class="comment">// 但这并不意味着map只给callback传一个参数</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通常使用parseInt时,只需要传递一个参数.</span></span><br><span class="line"><span class="comment">// 但实际上,parseInt可以有两个参数.第二个参数是进制数.</span></span><br><span class="line"><span class="comment">// 可以通过语句&quot;alert(parseInt.length)===2&quot;来验证.</span></span><br><span class="line"><span class="comment">// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素,</span></span><br><span class="line"><span class="comment">// 元素索引, 原数组本身.</span></span><br><span class="line"><span class="comment">// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,</span></span><br><span class="line"><span class="comment">// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>, <span class="string">&#x27;4&#x27;</span>].<span class="title function_">map</span>(<span class="built_in">parseInt</span>)); <span class="comment">// [1,NaN,NaN,NaN]</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">returnInt</span>(<span class="params">element</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">parseInt</span>(element, <span class="number">10</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>, <span class="string">&#x27;4&#x27;</span>].<span class="title function_">map</span>(returnInt)); <span class="comment">// [1,2,3,4]</span></span><br><span class="line"><span class="comment">// 也可以使用箭头函数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>, <span class="string">&#x27;4&#x27;</span>].<span class="title function_">map</span>(<span class="function"><span class="params">str</span> =&gt;</span> <span class="built_in">parseInt</span>(str))); <span class="comment">// [1,2,3,4]</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;3&#x27;</span>].<span class="title function_">map</span>(<span class="title class_">Number</span>)); <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="comment">// 与parseInt不同，下面结果会返回浮点数或指数</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="string">&#x27;1.1&#x27;</span>, <span class="string">&#x27;2.2e2&#x27;</span>, <span class="string">&#x27;3e300&#x27;</span>].<span class="title function_">map</span>(<span class="title class_">Number</span>)); <span class="comment">// [1.1, 220,2e+300]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 普通数组不会，但是对象数组会，中间有赋值的过程，就会改变原数组</span></span><br><span class="line"><span class="keyword">const</span> items = [&#123; <span class="attr">name</span>: <span class="string">&#x27;tom&#x27;</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&#x27;tony&#x27;</span> &#125;];</span><br><span class="line"><span class="keyword">const</span> result = items.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> (&#123; ...item, <span class="attr">gender</span>: <span class="string">&#x27;male&#x27;</span> &#125;)); <span class="comment">// 这样原数组不会影响</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(items); <span class="comment">// [&#123; name: &#x27;tom&#x27; &#125;,&#123; name: &#x27;tony&#x27; &#125;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result); <span class="comment">// [&#123;name: &#x27;tom&#x27;, gender: &#x27;male&#x27;&#125;,&#123;name: &#x27;tony&#x27;, gender: &#x27;male&#x27;&#125;]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> items2 = [&#123; <span class="attr">name</span>: <span class="string">&#x27;wei&#x27;</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&#x27;jin&#x27;</span> &#125;];</span><br><span class="line"><span class="keyword">const</span> result2 = items2.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> (item.<span class="property">gender</span> = <span class="string">&#x27;male&#x27;</span>)); <span class="comment">// 这样用会修改原数组</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(items2); <span class="comment">// [&#123;name: &#x27;wei&#x27;, gender: &#x27;male&#x27;&#125;,&#123;name: &#x27;jin&#x27;, gender: &#x27;male&#x27;&#125;]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2); <span class="comment">// [&#x27;male&#x27;, &#x27;male&#x27;]</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="forEach-filter-some"><a href="#forEach-filter-some" class="headerlink" title="forEach filter some"></a>forEach filter some</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// forEach(function(currentValue, index, arr)) 迭代(遍历)数组</span></span><br><span class="line"><span class="comment">// currentValue：数组当前项的值；index：数组当前索引；arr：数组对象本身</span></span><br><span class="line"><span class="keyword">var</span> arr0 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line"><span class="keyword">var</span> sum0 = <span class="number">0</span>;</span><br><span class="line">arr0.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">value, index, array</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(value, index, array);</span><br><span class="line">  sum0 += value;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(sum0, <span class="string">&#x27;sum&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr6 = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;green&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>];</span><br><span class="line">arr6.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (item == <span class="string">&#x27;green&#x27;</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;找到该元素&#x27;</span>, item);</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>; <span class="comment">// 在forEach和filter里面return不会终止迭代</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(item);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组</span></span><br><span class="line"><span class="comment">// 不会对空数组进行检测，不会改变原始数组</span></span><br><span class="line"><span class="comment">// 注意：它直接返回一个新数组</span></span><br><span class="line"><span class="comment">// array.filter(function(currentValue, index, arr)) 筛选数组</span></span><br><span class="line"><span class="comment">// currentValue：数组当前项的值；index：数组当前索引；arr：数组对象本身</span></span><br><span class="line"><span class="keyword">const</span> arr3 = [<span class="number">12</span>, <span class="number">66</span>, <span class="number">4</span>, <span class="number">88</span>, <span class="number">3</span>, <span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr3.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item % <span class="number">2</span> === <span class="number">0</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 去掉数组中的假值，比如空字符串、undefined、null、0、false</span></span><br><span class="line"><span class="keyword">const</span> arr4 = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">3</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="string">&#x27;&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="literal">undefined</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="literal">null</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="number">0</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="literal">false</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr4.<span class="title function_">filter</span>(<span class="function">(<span class="params">&#123; id &#125;</span>) =&gt;</span> id));</span><br><span class="line"></span><br><span class="line"><span class="comment">// filter结合find方法，实现两个数组的补集，oldArr的元素newArr中都有，再newArr中去掉所用的oldArr</span></span><br><span class="line"><span class="keyword">const</span> array = [<span class="number">32</span>, <span class="number">4</span>, <span class="number">11</span>, <span class="number">55</span>, <span class="number">46</span>, <span class="number">99</span>, <span class="number">104</span>, <span class="number">54</span>, <span class="number">16</span>, <span class="number">33</span>, <span class="number">78</span>, <span class="number">43</span>, <span class="number">40</span>];</span><br><span class="line"><span class="keyword">const</span> oldArr = [<span class="number">32</span>, <span class="number">33</span>, <span class="number">16</span>, <span class="number">40</span>, <span class="number">30</span>];</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">complementarySet</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> result = array.<span class="title function_">filter</span>(<span class="function"><span class="params">FilterItem</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43]</span></span><br><span class="line">    <span class="comment">// 不取反打印 [32, 16, 33, 40] 此处30的元素不符合，所以不返回30的值</span></span><br><span class="line">    <span class="comment">// 此处取反去掉，将变换元素状态</span></span><br><span class="line">    <span class="keyword">return</span> !oldArr.<span class="title function_">find</span>(<span class="function"><span class="params">findItem</span> =&gt;</span> <span class="title class_">FilterItem</span> === findItem);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">complementarySet</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">// some()方法用于检测数组中的元素是否满足指定条件，通俗点就是查找数组中是否有满足条件的元素</span></span><br><span class="line"><span class="comment">// 不会对空数组进行检测，不会改变原始数组</span></span><br><span class="line"><span class="comment">// 如果找到第一个满足条件的元素，则终止循环，不在继续查找</span></span><br><span class="line"><span class="comment">// 注意：它返回的是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false</span></span><br><span class="line"><span class="comment">// 应用场景：非空判断（判断多个表单元素，有没有空文本）</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">10</span>, <span class="number">30</span>, <span class="number">4</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">some</span>(<span class="function"><span class="params">item</span> =&gt;</span> item &lt;= <span class="number">3</span>)); <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = [<span class="string">&#x27;red&#x27;</span>, <span class="string">&#x27;green&#x27;</span>, <span class="string">&#x27;blue&#x27;</span>, <span class="string">&#x27;pink&#x27;</span>];</span><br><span class="line"><span class="keyword">const</span> some2 = arr2.<span class="title function_">some</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (item == <span class="string">&#x27;green&#x27;</span> || item == <span class="string">&#x27;pink&#x27;</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;找到该元素&#x27;</span>, item);</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>; <span class="comment">// 在some里面遇到return true就会终止遍历，迭代效率更高</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(some2); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// filter 和 some 的对比</span></span><br><span class="line"><span class="comment">// filter也是查找满足条件的元素，返回的是一个数组，而且是把所有满足条件的元素返回回来</span></span><br><span class="line"><span class="comment">// some也是查找满足条件的元素是否存放，返回的是一个布尔值，如果查找到第一个满足条件的元素就终止循环</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="数组对象的一些转换案例"><a href="#数组对象的一些转换案例" class="headerlink" title="数组对象的一些转换案例"></a>数组对象的一些转换案例</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回当前数组中分数的排名，如果有相同分数的情况下，让他们并列该排名</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">scoreRanking</span>(<span class="params">arr, num</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> changedArr = <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(arr.<span class="title function_">map</span>(<span class="title class_">Number</span>)));</span><br><span class="line">  <span class="keyword">let</span> nums = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; changedArr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (num &lt;= changedArr[i]) nums++;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> nums;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">scoreRanking</span>([<span class="string">&#x27;1&#x27;</span>, <span class="string">&#x27;3&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;2&#x27;</span>, <span class="string">&#x27;4&#x27;</span>, <span class="string">&#x27;4&#x27;</span>, <span class="string">&#x27;7&#x27;</span>, <span class="string">&#x27;5&#x27;</span>], <span class="number">3</span>)); <span class="comment">// 得分排名为4</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 将这样类型的 [&#123;...&#125;, &#123;...&#125;, &#123;...&#125;, &#123;...&#125;, ...] 变为 &#123;1: [&#123;...&#125;,&#123;...&#125;], 2: [&#123;...&#125;,&#123;...&#125;], 3: [&#123;...&#125;]&#125;</span></span><br><span class="line"><span class="comment">// 用添加到obj的方法</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">byObjKeyClassifyArr</span>(<span class="params">array</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> objKeyArr = <span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="keyword">new</span> <span class="title class_">Set</span>(array.<span class="title function_">map</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">sex</span>)));</span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">  objKeyArr.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    obj[item] = array.<span class="title function_">filter</span>(<span class="function"><span class="params">filterItem</span> =&gt;</span> filterItem.<span class="property">sex</span> == item);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//用new Map()</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">strMapToObj</span>(<span class="params">strMap</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> obj = <span class="title class_">Object</span>.<span class="title function_">create</span>(<span class="literal">null</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> [k, v] <span class="keyword">of</span> strMap) &#123;</span><br><span class="line">    obj[k] = v;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> obj;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">byMapClassifyArr</span>(<span class="params">array</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>();</span><br><span class="line">  array.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    map.<span class="title function_">has</span>(item.<span class="property">sex</span>)</span><br><span class="line">      ? map.<span class="title function_">get</span>(item.<span class="property">sex</span>).<span class="title function_">push</span>(item)</span><br><span class="line">      : map.<span class="title function_">set</span>(item.<span class="property">sex</span>, [item]);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> map;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> array = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;w&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;男&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;h&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;女&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;l&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;男&#x27;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&#x27;c&#x27;</span>, <span class="attr">sex</span>: <span class="string">&#x27;女&#x27;</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">byObjKeyClassifyArr</span>(array));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">byMapClassifyArr</span>(array), <span class="title function_">strMapToObj</span>(<span class="title function_">byMapClassifyArr</span>(array)));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取出所以check为true的对象，根据row进行从小到大排列</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">rowSort</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> arr</span><br><span class="line">    .<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">check</span>)</span><br><span class="line">    .<span class="title function_">sort</span>(<span class="function">(<span class="params">pre, nex</span>) =&gt;</span> (pre.<span class="property">row</span> &gt; nex.<span class="property">row</span> ? <span class="number">1</span> : pre.<span class="property">row</span> &lt; nex.<span class="property">row</span> ? -<span class="number">1</span> : <span class="number">0</span>));</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> arr = [</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="string">&#x27;type&#x27;</span>, <span class="attr">name</span>: <span class="string">&#x27;类型&#x27;</span>, <span class="attr">row</span>: <span class="number">3</span>, <span class="attr">check</span>: <span class="literal">true</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="string">&#x27;category&#x27;</span>, <span class="attr">name</span>: <span class="string">&#x27;类别&#x27;</span>, <span class="attr">row</span>: <span class="number">1</span>, <span class="attr">check</span>: <span class="literal">true</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="string">&#x27;source&#x27;</span>, <span class="attr">name</span>: <span class="string">&#x27;来源&#x27;</span>, <span class="attr">row</span>: <span class="number">2</span>, <span class="attr">check</span>: <span class="literal">false</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">id</span>: <span class="string">&#x27;grade&#x27;</span>, <span class="attr">name</span>: <span class="string">&#x27;等级&#x27;</span>, <span class="attr">row</span>: <span class="number">4</span>, <span class="attr">check</span>: <span class="literal">false</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">rowSort</span>(arr));</span><br></pre></td></tr></table></figure>

<h2 id="some-every-find-findIndex"><a href="#some-every-find-findIndex" class="headerlink" title="some every find findIndex"></a>some every find findIndex</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = [&#123; <span class="attr">value</span>: <span class="string">&#x27;&#x27;</span> &#125;, &#123; <span class="attr">value</span>: <span class="string">&#x27;&#x27;</span> &#125;, &#123; <span class="attr">value</span>: <span class="string">&#x27;banana&#x27;</span> &#125;, &#123; <span class="attr">value</span>: <span class="string">&#x27;&#x27;</span> &#125;];</span><br><span class="line"><span class="comment">// some()方法 对数组中的每一项进行校验，只要一项通过了就是true，一项都没有通过就是false</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">some</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">value</span> !== <span class="string">&#x27;&#x27;</span>)); <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// every()方法 对数组中的每一项进行校验，只要有一项不通过就是false，全部通过才是true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">every</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">value</span> !== <span class="string">&#x27;&#x27;</span>)); <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// find()方法 返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">find</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">value</span> !== <span class="string">&#x27;&#x27;</span>)); <span class="comment">// &#123;value: &#x27;banana&#x27;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// findIndex()方法 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr.<span class="title function_">findIndex</span>(<span class="function"><span class="params">item</span> =&gt;</span> item.<span class="property">value</span> !== <span class="string">&#x27;&#x27;</span>)); <span class="comment">// 2</span></span><br></pre></td></tr></table></figure>

<h2 id="Underscore数组-1-10"><a href="#Underscore数组-1-10" class="headerlink" title="Underscore数组 1-10"></a>Underscore数组 1-10</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、first _.first(array, [n]) Aliases: head, take</span></span><br><span class="line"><span class="comment">// 返回array （数组）的第一个元素。</span></span><br><span class="line"><span class="comment">// 传递 n参数将返回数组中从第一个元素开始的n个元素（愚人码头注：返回数组中前 n 个元素.）。</span></span><br><span class="line"><span class="comment">// _.first([5, 4, 3, 2, 1]); =&gt; 5</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">first</span>(<span class="params">arr, n</span>) &#123;</span><br><span class="line">  <span class="comment">//在这里利用了 slice(star, end) 方法，截取数组中的元素</span></span><br><span class="line">  <span class="comment">// if (Array.isArray(arr)) &#123;</span></span><br><span class="line">  <span class="comment">// if (typeof n === &#x27;number&#x27;) return arr.slice(0, n)</span></span><br><span class="line">  <span class="comment">// return arr.slice(0, 1)[0];</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// return undefined;</span></span><br><span class="line">  <span class="keyword">let</span> result = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr) ? [] : &#123;&#125;;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> arr === <span class="string">&#x27;object&#x27;</span> &amp;&amp; <span class="keyword">typeof</span> arr !== <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr)) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> n === <span class="string">&#x27;number&#x27;</span>) &#123;</span><br><span class="line">          <span class="keyword">if</span> (i &lt; n) result.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          result.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span> (<span class="keyword">typeof</span> arr === <span class="string">&#x27;object&#x27;</span>) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> i <span class="keyword">in</span> arr) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> n === <span class="string">&#x27;number&#x27;</span>) &#123;</span><br><span class="line">          result[i] = arr[i];</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          result[i] = arr[i];</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">first</span>(&#123; <span class="attr">a</span>: <span class="number">5</span>, <span class="attr">b</span>: <span class="number">4</span> &#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">first</span>(&#123; <span class="attr">a</span>: <span class="number">5</span>, <span class="attr">b</span>: <span class="number">4</span>, <span class="attr">c</span>: <span class="number">3</span> &#125;, <span class="number">2</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">first</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>]));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">first</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>], <span class="number">3</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、initial _.initial(array, [n])</span></span><br><span class="line"><span class="comment">// 返回数组中除了最后一个元素外的其他全部元素。 在arguments对象上特别有用。</span></span><br><span class="line"><span class="comment">// 传递 n参数将从结果中排除从最后一个开始的n个元素（愚人码头注：排除数组后面的 n 个元素）。</span></span><br><span class="line"><span class="comment">// _.initial([5, 4, 3, 2, 1]) =&gt; [5, 4, 3, 2]</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">initial</span>(<span class="params">arr, n</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr)) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> n === <span class="string">&#x27;number&#x27;</span>) <span class="keyword">return</span> arr.<span class="title function_">slice</span>(<span class="number">0</span>, arr.<span class="property">length</span> - n);</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">slice</span>(arr.<span class="property">length</span> - <span class="number">1</span>, arr.<span class="property">length</span>)[<span class="number">0</span>];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">initial</span>(&#123; <span class="attr">a</span>: <span class="number">5</span>, <span class="attr">b</span>: <span class="number">4</span>, <span class="attr">c</span>: <span class="number">3</span>, <span class="attr">d</span>: <span class="number">2</span>, <span class="attr">e</span>: <span class="number">1</span> &#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">initial</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>]));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">initial</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>], <span class="number">2</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、last _.last(array, [n])</span></span><br><span class="line"><span class="comment">// 返回array（数组）中最后一个元素。传递 n参数将返回数组中从最后一个元素开始的n个元素</span></span><br><span class="line"><span class="comment">// （愚人码头注：返回数组里的后面的n个元素）。</span></span><br><span class="line"><span class="comment">// _.last([5, 4, 3, 2, 1])=&gt; 1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">last</span>(<span class="params">arr, n</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr)) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> n === <span class="string">&#x27;number&#x27;</span>) <span class="keyword">return</span> arr.<span class="title function_">slice</span>(arr.<span class="property">length</span> - n, arr.<span class="property">length</span>);</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">slice</span>(arr.<span class="property">length</span> - <span class="number">1</span>, arr.<span class="property">length</span>)[<span class="number">0</span>];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">last</span>(&#123; <span class="attr">a</span>: <span class="number">5</span>, <span class="attr">b</span>: <span class="number">4</span>, <span class="attr">c</span>: <span class="number">3</span>, <span class="attr">d</span>: <span class="number">2</span>, <span class="attr">e</span>: <span class="number">1</span> &#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">last</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>]));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">last</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>], <span class="number">3</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、rest _.rest(array, [index]) Aliases: tail, drop</span></span><br><span class="line"><span class="comment">// 返回数组中除了第一个元素外的其他全部元素。传递 index 参数将返回从index开始的剩余所有元素 。</span></span><br><span class="line"><span class="comment">// _.rest([5, 4, 3, 2, 1]);</span></span><br><span class="line"><span class="comment">// =&gt; [4, 3, 2, 1]</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">rest</span>(<span class="params">arr, n</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(arr)) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> n === <span class="string">&#x27;number&#x27;</span>) <span class="keyword">return</span> arr.<span class="title function_">slice</span>(arr.<span class="property">length</span> - n, arr.<span class="property">length</span>);</span><br><span class="line">    <span class="keyword">return</span> arr.<span class="title function_">slice</span>(<span class="number">1</span>, arr.<span class="property">length</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">rest</span>(&#123; <span class="attr">a</span>: <span class="number">5</span>, <span class="attr">b</span>: <span class="number">4</span>, <span class="attr">c</span>: <span class="number">3</span>, <span class="attr">d</span>: <span class="number">2</span>, <span class="attr">e</span>: <span class="number">1</span> &#125;));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">rest</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>]));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">rest</span>([<span class="number">5</span>, <span class="number">4</span>, <span class="number">3</span>, <span class="number">2</span>, <span class="number">1</span>], <span class="number">3</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、flatten _.flatten(array, [shallow])</span></span><br><span class="line"><span class="comment">// 将一个嵌套多层的数组 array（数组） (嵌套可以是任何层数)转换为只有一层的数组。</span></span><br><span class="line"><span class="comment">// 如果你传递 shallow参数，数组将只减少一维的嵌套。</span></span><br><span class="line"><span class="comment">// _.flatten([1, [2], [3, [[4]]]]);</span></span><br><span class="line"><span class="comment">// =&gt; [1, 2, 3, 4];</span></span><br><span class="line"><span class="comment">// _.flatten([1, [2], [3, [[4]]]], true);</span></span><br><span class="line"><span class="comment">// =&gt; [1, 2, 3, [[4]]];</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//首先建立一个空数组，用于装处理过后的数组</span></span><br><span class="line"><span class="comment">//然后用forEach遍历实参传入的数组，item指的是当前元素</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">flatten</span>(<span class="params">arr, shallow</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> ary = [];</span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="title class_">Array</span>.<span class="title function_">isArray</span>(item)) &#123;</span><br><span class="line">      <span class="comment">//判断当前元素是否为数组</span></span><br><span class="line">      <span class="keyword">if</span> (shallow !== <span class="literal">true</span>) &#123;</span><br><span class="line">        <span class="comment">//如果传入的第二个实参不是true，那么就不执行if里面的内容</span></span><br><span class="line">        item = <span class="title function_">flatten</span>(item); <span class="comment">//利用递归函数继续遍历数组，并取得里面的值</span></span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// item = shallow === false ? flatten(item) : item;</span></span><br><span class="line">      ary.<span class="title function_">push</span>(...item); <span class="comment">//当item是数组的情况下，就让它去掉一层数组</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      ary.<span class="title function_">push</span>(item); <span class="comment">//当item1不是数组的情况下，就直接加进空数组就行</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> ary;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// let finalArray = [];</span></span><br><span class="line">  <span class="comment">// for(let i=0; i&lt;arr.length; i++) &#123;</span></span><br><span class="line">  <span class="comment">// if(Array.isArray(arr[i])) &#123;</span></span><br><span class="line">  <span class="comment">// if(shallow !== true) &#123;</span></span><br><span class="line">  <span class="comment">// arr[i] = flatten(arr[i]);</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// finalArray.push(...arr[i]);</span></span><br><span class="line">  <span class="comment">// &#125; else &#123;</span></span><br><span class="line">  <span class="comment">// finalArray.push(arr[i]);</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// return finalArray;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">flatten</span>([<span class="string">&#x27;1&#x27;</span>, [<span class="literal">true</span>], [<span class="number">3</span>, [[<span class="number">4</span>]]]])); <span class="comment">// [&#x27;1&#x27;, true, 3, 4]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">flatten</span>([<span class="number">1</span>, [<span class="number">2</span>], [<span class="number">3</span>, [[<span class="number">4</span>]]]], <span class="literal">true</span>)); <span class="comment">// [&#x27;1&#x27;, true, 3, [[4]]]</span></span><br></pre></td></tr></table></figure>

<h2 id="自定义函数1"><a href="#自定义函数1" class="headerlink" title="自定义函数1"></a>自定义函数1</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">map</span>(<span class="params">arr, callback</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    result.<span class="title function_">push</span>(<span class="title function_">callback</span>(arr[i], i, arr)); <span class="comment">// 执行回调</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> arrMap = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  <span class="title function_">map</span>(arrMap, <span class="function">(<span class="params">item, index</span>) =&gt;</span> (item = <span class="number">3</span>)),</span><br><span class="line">  arrMap</span><br><span class="line">);</span><br><span class="line"><span class="keyword">const</span> arrMap1 = [&#123; <span class="attr">name</span>: <span class="string">&#x27;w&#x27;</span> &#125;, &#123; <span class="attr">name</span>: <span class="string">&#x27;j&#x27;</span> &#125;];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  <span class="title function_">map</span>(arrMap1, <span class="function">(<span class="params">item, index</span>) =&gt;</span> (item.<span class="property">gender</span> = <span class="string">&#x27;male&#x27;</span>)),</span><br><span class="line">  arrMap1</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">reduce</span>(<span class="params">arr, callback, initValue</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> result = initValue;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="comment">//reduce的关键点：用result来接收回调函数的内容</span></span><br><span class="line">    result = <span class="title function_">callback</span>(result, arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arrReduce = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">reduce</span>(arrReduce, <span class="function">(<span class="params">pre, cur</span>) =&gt;</span> pre + cur, <span class="number">0</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">reduce</span>(arrReduce, <span class="function">(<span class="params">pre, cur</span>) =&gt;</span> pre + cur, <span class="number">10</span>));</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">filter</span>(<span class="params">arr, callback</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> res = <span class="title function_">callback</span>(arr[i], i);</span><br><span class="line">    <span class="comment">// 判断，如果为真，则加进result里面</span></span><br><span class="line">    <span class="keyword">if</span> (res) result.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> arrFilter = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">filter</span>(arrFilter, <span class="function"><span class="params">item</span> =&gt;</span> item % <span class="number">2</span> === <span class="number">0</span>));</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">find</span>(<span class="params">arr, callback</span>) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> res = <span class="title function_">callback</span>(arr[i], i);</span><br><span class="line">    <span class="keyword">if</span> (res) <span class="keyword">return</span> arr[i];</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">undefined</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arrFind = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">find</span>(arrFind, <span class="function"><span class="params">item</span> =&gt;</span> item &gt; <span class="number">4</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">find</span>(arrFind, <span class="function"><span class="params">item</span> =&gt;</span> item &gt; <span class="number">5</span>));</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">findIndex</span>(<span class="params">arr, callback</span>) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> res = <span class="title function_">callback</span>(arr[i], i);</span><br><span class="line">    <span class="keyword">if</span> (res) <span class="keyword">return</span> i;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arrFindIndex = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">findIndex</span>(arrFindIndex, <span class="function">(<span class="params">item, index</span>) =&gt;</span> item &gt; <span class="number">4</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">findIndex</span>(arrFindIndex, <span class="function">(<span class="params">item, index</span>) =&gt;</span> item &gt; <span class="number">5</span>));</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">every</span>(<span class="params">arr, callback</span>) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (!<span class="title function_">callback</span>(arr[i], i)) <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arrEvery = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">every</span>(arrEvery, <span class="function">(<span class="params">item, index</span>) =&gt;</span> item &gt; <span class="number">1</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">every</span>(arrEvery, <span class="function">(<span class="params">item, index</span>) =&gt;</span> item &gt; <span class="number">0</span>));</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">some</span>(<span class="params">arr, callback</span>) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">callback</span>(arr[i], i)) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arrSome = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">some</span>(arrSome, <span class="function">(<span class="params">item, index</span>) =&gt;</span> item &gt; <span class="number">1</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">some</span>(arrSome, <span class="function">(<span class="params">item, index</span>) =&gt;</span> item &gt; <span class="number">9</span>));</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="自定义函数2"><a href="#自定义函数2" class="headerlink" title="自定义函数2"></a>自定义函数2</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组去重1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> result = [];</span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//检测result 数组中是否包含这个元素，若没有该元素，则放入到result中</span></span><br><span class="line">    <span class="keyword">if</span> (result.<span class="title function_">indexOf</span>(item) === -<span class="number">1</span>) result.<span class="title function_">push</span>(item);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">1</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">3</span>]));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组去重2</span></span><br><span class="line"><span class="comment">// 这里是利用了对象key值不能重复的特性，然后将obj作为是否去重过的标志</span></span><br><span class="line"><span class="comment">// 可以达到减少时间复杂度的效果</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique2</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> result = [];</span><br><span class="line">  <span class="keyword">const</span> obj = &#123;&#125;;</span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">if</span> (obj[item] === <span class="literal">undefined</span>) &#123;</span><br><span class="line">      <span class="comment">//将item作为下标存储在obj中</span></span><br><span class="line">      obj[item] = <span class="literal">true</span>; <span class="comment">//这边会将undefined变成true; 1: undefined ===&gt; 1:true</span></span><br><span class="line">      result.<span class="title function_">push</span>(item);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique2</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组去重3 New Set()</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">unique3</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> [...<span class="keyword">new</span> <span class="title class_">Set</span>(arr)];</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">unique3</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组合并</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">concat</span>(<span class="params">arr, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> result = [...arr]; <span class="comment">// result = [1, 2, 3]</span></span><br><span class="line">  args.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="title class_">Array</span>.<span class="title function_">isArray</span>(item) ? result.<span class="title function_">push</span>(...item) : result.<span class="title function_">push</span>(item);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">concat</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>], <span class="number">7</span>, <span class="number">8</span>, [<span class="number">9</span>, <span class="number">10</span>]));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组拆分</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">slice</span>(<span class="params">arr, begin, end</span>) &#123;</span><br><span class="line">  <span class="comment">//若arr数组长度为0</span></span><br><span class="line">  <span class="keyword">if</span> (arr.<span class="property">length</span> === <span class="number">0</span>) <span class="keyword">return</span> [];</span><br><span class="line">  <span class="comment">//判断 begin</span></span><br><span class="line">  begin = begin || <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">if</span> (begin &gt;= arr.<span class="property">length</span>) <span class="keyword">return</span> [];</span><br><span class="line">  <span class="comment">//判断 end</span></span><br><span class="line">  end = end || arr.<span class="property">length</span>;</span><br><span class="line">  <span class="keyword">if</span> (end &lt; begin) end = arr.<span class="property">length</span>;</span><br><span class="line">  <span class="keyword">const</span> result = [];</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="comment">//将下标对应的元素压入数组</span></span><br><span class="line">    <span class="keyword">if</span> (i &gt;= begin &amp;&amp; i &lt; end) result.<span class="title function_">push</span>(arr[i]);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">slice</span>([<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">9</span>, <span class="number">15</span>], <span class="number">1</span>, <span class="number">5</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组扁平化1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">flatten1</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// true： 然后[1, 2].concat([3, 4, .concat([5, 6])]) [1, 2, 3, 4, 5, 6]</span></span><br><span class="line">    <span class="comment">//false： 首先[1, 2] 最后 [1, 2, 3, 4, 5, 6, 7]</span></span><br><span class="line">    result = result.<span class="title function_">concat</span>(<span class="title class_">Array</span>.<span class="title function_">isArray</span>(item) ? <span class="title function_">flatten1</span>(item) : item);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">flatten1</span>([<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>, [<span class="number">5</span>, <span class="number">6</span>]], <span class="number">7</span>]));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组扁平化2</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">flatten2</span>(<span class="params">arr</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> result = [...arr];</span><br><span class="line">  <span class="keyword">while</span> (result.<span class="title function_">some</span>(<span class="function"><span class="params">item</span> =&gt;</span> <span class="title class_">Array</span>.<span class="title function_">isArray</span>(item))) &#123;</span><br><span class="line">    <span class="comment">//result = [].concat([1, 2, [3, 4, [5, 6]], 7]); [1, 2, 3, 4, [5, 6], 7]</span></span><br><span class="line">    <span class="comment">//result = [].concat([1, 2, 3, 4, [5, 6], 7]); [1, 2, 3, 4, 5, 6, 7]</span></span><br><span class="line">    result = [].<span class="title function_">concat</span>(...result);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">flatten2</span>([<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>, [<span class="number">5</span>, <span class="number">6</span>]], <span class="number">7</span>]));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组分块</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">chunk</span>(<span class="params">arr, size</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (arr.<span class="property">length</span> === <span class="number">0</span>) <span class="keyword">return</span> [];</span><br><span class="line">  <span class="keyword">let</span> result = [];</span><br><span class="line">  <span class="keyword">let</span> tmp = [];</span><br><span class="line">  arr.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//判断tmp元素长度是否为0 将tmp压入到result里面去</span></span><br><span class="line">    <span class="keyword">if</span> (tmp.<span class="property">length</span> === <span class="number">0</span>) result.<span class="title function_">push</span>(tmp);</span><br><span class="line">    <span class="comment">//将元素压入到临时数组tmp中</span></span><br><span class="line">    tmp.<span class="title function_">push</span>(item);</span><br><span class="line">    <span class="keyword">if</span> (tmp.<span class="property">length</span> === size) tmp = [];</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">chunk</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>], <span class="number">3</span>)); <span class="comment">//[1, 2, 3], [4, 5, 6], [7]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组差集</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">difference</span>(<span class="params">arr1, arr2 = []</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (arr1.<span class="property">length</span> === <span class="number">0</span>) <span class="keyword">return</span> [];</span><br><span class="line">  <span class="keyword">if</span> (arr2.<span class="property">length</span> === <span class="number">0</span>) <span class="keyword">return</span> arr1.<span class="title function_">slice</span>();</span><br><span class="line">  <span class="keyword">const</span> result = arr1.<span class="title function_">filter</span>(<span class="function"><span class="params">item</span> =&gt;</span> !arr2.<span class="title function_">includes</span>(item));</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">difference</span>([<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>], [<span class="number">5</span>, <span class="number">8</span>]));</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">pull</span>(<span class="params">arr, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> result = []; <span class="comment">// 声明空数组，保留删掉的元素</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="comment">//判断当前元素是否存在于args数组中</span></span><br><span class="line">    <span class="keyword">if</span> (args.<span class="title function_">includes</span>(arr[i])) &#123;</span><br><span class="line">      result.<span class="title function_">push</span>(arr[i]); <span class="comment">// 将当前元素的值存入到result中</span></span><br><span class="line">      arr.<span class="title function_">splice</span>(i, <span class="number">1</span>); <span class="comment">// 删除当前的元素</span></span><br><span class="line">      i--; <span class="comment">// 下标自减</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//当values是数组形式的时候</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">pullAll</span>(<span class="params">arr, values</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">pull</span>(arr, ...values);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">3</span>, <span class="number">7</span>];</span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">3</span>, <span class="number">7</span>];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">pull</span>(arr, <span class="number">2</span>, <span class="number">7</span>, <span class="number">3</span>, <span class="number">7</span>)); <span class="comment">//[3, 3, 7]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr); <span class="comment">//[1, 5]</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">pullAll</span>(arr1, [<span class="number">2</span>, <span class="number">3</span>, <span class="number">7</span>]));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr1);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取数组某些元素</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">drop</span>(<span class="params">arr, size</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> arr.<span class="title function_">filter</span>(<span class="function">(<span class="params">value, index</span>) =&gt;</span> index &gt;= size);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">drop</span>([<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">9</span>, <span class="number">11</span>], <span class="number">2</span>)); <span class="comment">// [5, 7, 9, 11]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">dropRight</span>(<span class="params">arr, size</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> arr.<span class="title function_">filter</span>(<span class="function">(<span class="params">value, index</span>) =&gt;</span> index &lt; arr.<span class="property">length</span> - size);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">dropRight</span>([<span class="number">1</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">7</span>, <span class="number">9</span>, <span class="number">11</span>], <span class="number">2</span>)); <span class="comment">// [1, 3, 5, 7]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 检测对象</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">newInstance</span>(<span class="params">Fn, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> obj = &#123;&#125;; <span class="comment">// 1、创建一个新对象</span></span><br><span class="line">  <span class="keyword">const</span> result = <span class="title class_">Fn</span>.<span class="title function_">call</span>(obj, ...args); <span class="comment">// 2、修改函数内部this指向新对象并执行</span></span><br><span class="line">  obj.<span class="property">__proto__</span> = <span class="title class_">Fn</span>.<span class="property"><span class="keyword">prototype</span></span>; <span class="comment">// 修改新对象的原型对象</span></span><br><span class="line">  <span class="keyword">return</span> result <span class="keyword">instanceof</span> <span class="title class_">Object</span> ? result : obj; <span class="comment">// 3、返回新对象</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">age</span> = age;</span><br><span class="line">  <span class="comment">// return &#123;a: 100&#125;;</span></span><br><span class="line">  <span class="comment">// return [];</span></span><br><span class="line">  <span class="comment">// return function()&#123;&#125;;</span></span><br><span class="line">  <span class="comment">// return &#x27;wei&#x27;;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用 newInstance 函数创建对象</span></span><br><span class="line"><span class="keyword">let</span> obj = <span class="title function_">newInstance</span>(<span class="title class_">Person</span>, <span class="string">&#x27;wei&#x27;</span>, <span class="number">18</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 检测类型</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">myInstanceOf</span>(<span class="params">obj, Fn</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> prototype = <span class="title class_">Fn</span>.<span class="property"><span class="keyword">prototype</span></span>; <span class="comment">// 获取函数的显示原型</span></span><br><span class="line">  <span class="keyword">let</span> proto = obj.<span class="property">__proto__</span>; <span class="comment">// 获取obj的隐式原型对象</span></span><br><span class="line">  <span class="comment">//遍历原型链</span></span><br><span class="line">  <span class="keyword">while</span> (proto) &#123;</span><br><span class="line">    <span class="comment">// 检测原型对象是否相等</span></span><br><span class="line">    <span class="keyword">if</span> (prototype === proto) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    <span class="comment">// 如果不等于</span></span><br><span class="line">    proto = proto.<span class="property">__proto__</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//声明一个构造函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> <span class="title class_">Person</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">myInstanceOf</span>(p, <span class="title class_">Person</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">myInstanceOf</span>(p, <span class="title class_">Object</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">myInstanceOf</span>(<span class="title class_">Person</span>, <span class="title class_">Object</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">myInstanceOf</span>(<span class="title class_">Person</span>, <span class="title class_">Function</span>));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">myInstanceOf</span>(p, <span class="title class_">Function</span>)); <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">mergeObject</span>(<span class="params">...objs</span>) &#123;</span><br><span class="line">  <span class="comment">//声明一个空对象</span></span><br><span class="line">  <span class="keyword">const</span> result = &#123;&#125;;</span><br><span class="line">  <span class="comment">//遍历所有的参数对象</span></span><br><span class="line">  objs.<span class="title function_">forEach</span>(<span class="function"><span class="params">obj</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//获取当前对象所有的属性</span></span><br><span class="line">    <span class="title class_">Object</span>.<span class="title function_">keys</span>(obj).<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">//检测result中是否存在key属性</span></span><br><span class="line">      result[key] = result.<span class="title function_">hasOwnProperty</span>(key)</span><br><span class="line">        ? [].<span class="title function_">concat</span>(result[key], obj[key])</span><br><span class="line">        : (result[key] = obj[key]);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> object = &#123; <span class="attr">a</span>: [&#123; <span class="attr">x</span>: <span class="number">2</span> &#125;, &#123; <span class="attr">y</span>: <span class="number">4</span> &#125;], <span class="attr">b</span>: <span class="number">1</span>, <span class="attr">c</span>: <span class="string">&#x27;bar&#x27;</span>, <span class="attr">d</span>: <span class="number">10</span> &#125;;</span><br><span class="line"><span class="keyword">const</span> other = &#123; <span class="attr">a</span>: &#123; <span class="attr">z</span>: <span class="number">3</span> &#125;, <span class="attr">b</span>: [<span class="number">2</span>, <span class="number">3</span>], <span class="attr">c</span>: <span class="string">&#x27;foo&#x27;</span>, <span class="attr">d</span>: <span class="number">20</span> &#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">mergeObject</span>(object, other));</span><br><span class="line"></span><br></pre></td></tr></table></figure>


<h2 id="自定义函数3"><a href="#自定义函数3" class="headerlink" title="自定义函数3"></a>自定义函数3</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浅拷贝：只是复制了对象属性或数组元素本身(只是引用地址值)</span></span><br><span class="line"><span class="comment">// 只是拷贝了每个person对象的引用地址值，每个person对象只有一份</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">clone</span>(<span class="params">target</span>) &#123;</span><br><span class="line">  <span class="comment">//类型判断 &#x27;object&#x27;里面包含了 &#123;&#125; [] null</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">typeof</span> target === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target !== <span class="literal">null</span></span><br><span class="line">    ? <span class="title class_">Array</span>.<span class="title function_">isArray</span>(target)</span><br><span class="line">      ? [...target]</span><br><span class="line">      : &#123; ...target &#125;</span><br><span class="line">    : target;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj = &#123; <span class="attr">x</span>: <span class="string">&#x27;abc&#x27;</span>, <span class="attr">y</span>: &#123; <span class="attr">m</span>: <span class="number">1</span> &#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> result = <span class="title function_">clone</span>(obj);</span><br><span class="line"><span class="comment">//修改新数组中某个引用类型的值</span></span><br><span class="line">result.<span class="property">y</span>.<span class="property">m</span> = <span class="number">2</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj === result);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 浅拷贝2</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">clone2</span>(<span class="params">target</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> target === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target !== <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="comment">// 创建一个容器</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(target) ? [] : &#123;&#125;;</span><br><span class="line">    <span class="comment">// 遍历target 数据</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      <span class="comment">// 判断当前对象身上是否包含该属性 将属性设置为result结果数据中</span></span><br><span class="line">      <span class="keyword">if</span> (target.<span class="title function_">hasOwnProperty</span>(key)) result[key] = target[key];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> obj2 = &#123; <span class="attr">x</span>: <span class="string">&#x27;abc&#x27;</span>, <span class="attr">y</span>: &#123; <span class="attr">m</span>: <span class="number">1</span> &#125; &#125;;</span><br><span class="line"><span class="keyword">const</span> result2 = <span class="title function_">clone2</span>(obj2);</span><br><span class="line"><span class="comment">// 修改新数组中某个引用类型的值</span></span><br><span class="line">result2.<span class="property">y</span>.<span class="property">m</span> = <span class="number">2</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj2);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(result2);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj2 === result2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 深拷贝1</span></span><br><span class="line"><span class="comment">// 大众乞丐版</span></span><br><span class="line"><span class="comment">// 问题1：函数属性会丢失；问题2：循环引用会出错</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">deepClone1</span>(<span class="params">target</span>) &#123;</span><br><span class="line">  <span class="comment">// 通过数据创建 JSON 格式的字符串</span></span><br><span class="line">  <span class="keyword">let</span> str = <span class="title class_">JSON</span>.<span class="title function_">stringify</span>(target);</span><br><span class="line">  <span class="comment">// 将JSON字符串创建为JS数据</span></span><br><span class="line">  <span class="keyword">let</span> data = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(str);</span><br><span class="line">  <span class="keyword">return</span> data;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> deepObj = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>, <span class="string">&#x27;g&#x27;</span>],</span><br><span class="line">  <span class="attr">c</span>: &#123; <span class="attr">h</span>: <span class="number">20</span> &#125;,</span><br><span class="line">  <span class="comment">//JSON不能克隆方法</span></span><br><span class="line">  <span class="attr">d</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//循环引用</span></span><br><span class="line"><span class="comment">// deepObj.b.push(deepObj.c);</span></span><br><span class="line"><span class="comment">// deepObj.c.j = deepObj.b;</span></span><br><span class="line"><span class="keyword">const</span> deepResult = <span class="title function_">deepClone1</span>(deepObj);</span><br><span class="line"><span class="comment">//修改新数据的属性值</span></span><br><span class="line">deepResult.<span class="property">c</span>.<span class="property">h</span> = <span class="number">2000</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepObj);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepResult);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 深拷贝2</span></span><br><span class="line"><span class="comment">// 面试基础版</span></span><br><span class="line"><span class="comment">// 解决问题1：函数属性还没丢失</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">deepClone2</span>(<span class="params">target</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> target === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target !== <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(target) ? [] : &#123;&#125;;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      <span class="comment">// 检测该属性是否为对象本身的属性(不能拷贝原型对象的属性)</span></span><br><span class="line">      <span class="keyword">if</span> (target.<span class="title function_">hasOwnProperty</span>(key)) result[key] = <span class="title function_">deepClone2</span>(target[key]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> deepObj2 = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>, <span class="string">&#x27;g&#x27;</span>],</span><br><span class="line">  <span class="attr">c</span>: &#123; <span class="attr">h</span>: <span class="number">20</span> &#125;,</span><br><span class="line">  <span class="comment">// JSON不能克隆方法</span></span><br><span class="line">  <span class="attr">d</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 循环引用</span></span><br><span class="line"><span class="comment">// deepObj2.b.push(deepObj2.c);</span></span><br><span class="line"><span class="comment">// deepObj2.c.j = deepObj2.b;</span></span><br><span class="line"><span class="keyword">const</span> deepResult1 = <span class="title function_">deepClone2</span>(deepObj2);</span><br><span class="line"><span class="comment">// 修改新数据的属性值</span></span><br><span class="line">deepResult1.<span class="property">c</span>.<span class="property">h</span> = <span class="number">2000</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepObj2);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepResult1);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 深拷贝3</span></span><br><span class="line"><span class="comment">// 面试加强版本</span></span><br><span class="line"><span class="comment">// 解决问题2：循环引用正常</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">deepClone3</span>(<span class="params">target, map = <span class="keyword">new</span> <span class="built_in">Map</span>()</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> target === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target !== <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> cache = map.<span class="title function_">get</span>(target);</span><br><span class="line">    <span class="keyword">if</span> (cache) <span class="keyword">return</span> cache;</span><br><span class="line">    <span class="comment">//创建一个容器</span></span><br><span class="line">    <span class="keyword">const</span> result = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(target) ? [] : &#123;&#125;;</span><br><span class="line">    <span class="comment">//将新的结果存入到容器中</span></span><br><span class="line">    map.<span class="title function_">set</span>(target, result);</span><br><span class="line">    <span class="comment">//遍历对象</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> key <span class="keyword">in</span> target) &#123;</span><br><span class="line">      <span class="comment">//检测该属性是否为对象本身的属性(不能拷贝原型对象的属性)</span></span><br><span class="line">      <span class="keyword">if</span> (target.<span class="title function_">hasOwnProperty</span>(key))</span><br><span class="line">        result[key] = <span class="title function_">deepClone3</span>(target[key], map);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> deepObj3 = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>, <span class="string">&#x27;g&#x27;</span>],</span><br><span class="line">  <span class="attr">c</span>: &#123; <span class="attr">h</span>: <span class="number">20</span> &#125;,</span><br><span class="line">  <span class="comment">//JSON不能克隆方法</span></span><br><span class="line">  <span class="attr">d</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//循环引用</span></span><br><span class="line">deepObj3.<span class="property">b</span>.<span class="title function_">push</span>(deepObj3.<span class="property">c</span>);</span><br><span class="line">deepObj3.<span class="property">c</span>.<span class="property">j</span> = deepObj3.<span class="property">b</span>;</span><br><span class="line"><span class="keyword">const</span> deepResult3 = <span class="title function_">deepClone3</span>(deepObj3);</span><br><span class="line"><span class="comment">//修改新数据的属性值</span></span><br><span class="line">deepResult3.<span class="property">c</span>.<span class="property">h</span> = <span class="number">2000</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepObj3);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepResult3);</span><br><span class="line"></span><br><span class="line"><span class="comment">//面试加强版本2 (优化遍历性能)</span></span><br><span class="line"><span class="comment">//数组：while | for | forEach 优于 for-in | key() &amp; forEach()</span></span><br><span class="line"><span class="comment">//对象：for-in 与 key() &amp; forEach() 差不多</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">deepClone4</span>(<span class="params">target, map = <span class="keyword">new</span> <span class="built_in">Map</span>()</span>) &#123;</span><br><span class="line">  <span class="comment">//检测数据类型</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> target === <span class="string">&#x27;object&#x27;</span> &amp;&amp; target !== <span class="literal">null</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> cache = map.<span class="title function_">get</span>(target);</span><br><span class="line">    <span class="keyword">if</span> (cache) <span class="keyword">return</span> cache;</span><br><span class="line">    <span class="comment">//判断目标数据的类型</span></span><br><span class="line">    <span class="keyword">let</span> isArray = <span class="title class_">Array</span>.<span class="title function_">isArray</span>(target);</span><br><span class="line">    <span class="comment">//创建一个容器</span></span><br><span class="line">    <span class="keyword">const</span> result = isArray ? [] : &#123;&#125;;</span><br><span class="line">    <span class="comment">//将新的结果存入到容器中</span></span><br><span class="line">    map.<span class="title function_">set</span>(target, result);</span><br><span class="line">    <span class="comment">//如果目标数据为数组</span></span><br><span class="line">    <span class="keyword">if</span> (isArray) &#123;</span><br><span class="line">      <span class="comment">//forEach 遍历</span></span><br><span class="line">      target.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, index</span>) =&gt;</span> &#123;</span><br><span class="line">        result[index] = <span class="title function_">deepClone4</span>(item, map);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">//如果是对象,获取所有的键名，然后forEach遍历</span></span><br><span class="line">      <span class="title class_">Object</span>.<span class="title function_">keys</span>(target).<span class="title function_">forEach</span>(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">        result[key] = <span class="title function_">deepClone4</span>(target[key], map);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> target;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> deepObj4 = &#123;</span><br><span class="line">  <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">b</span>: [<span class="string">&#x27;e&#x27;</span>, <span class="string">&#x27;f&#x27;</span>, <span class="string">&#x27;g&#x27;</span>],</span><br><span class="line">  <span class="attr">c</span>: &#123; <span class="attr">h</span>: <span class="number">20</span> &#125;,</span><br><span class="line">  <span class="comment">//JSON不能克隆方法</span></span><br><span class="line">  <span class="attr">d</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//循环引用</span></span><br><span class="line">deepObj4.<span class="property">b</span>.<span class="title function_">push</span>(deepObj4.<span class="property">c</span>);</span><br><span class="line">deepObj4.<span class="property">c</span>.<span class="property">j</span> = deepObj4.<span class="property">b</span>;</span><br><span class="line"><span class="keyword">const</span> deepResult4 = <span class="title function_">deepClone4</span>(deepObj4);</span><br><span class="line"><span class="comment">//修改新数据的属性值</span></span><br><span class="line">deepResult4.<span class="property">c</span>.<span class="property">h</span> = <span class="number">2000</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepObj4);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(deepResult4);</span><br><span class="line"><span class="comment">// 字符串翻转</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">reverseString</span>(<span class="params">str</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> [...str].<span class="title function_">reverse</span>().<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;wei&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> str2 = <span class="string">&#x27;lol&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> str3 = <span class="string">&#x27; 不要你离开，距离隔不开&#x27;</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">reverseString</span>(str));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 是否为回文</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">palindrome</span>(<span class="params">str</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="title function_">reverseString</span>(str) === str;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">palindrome</span>(str), <span class="title function_">palindrome</span>(str2));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 字符串截断</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">truncate</span>(<span class="params">str, size</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> str.<span class="title function_">slice</span>(<span class="number">0</span>, size) + <span class="string">&#x27;...&#x27;</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">truncate</span>(str3, <span class="number">10</span>));</span><br></pre></td></tr></table></figure>


<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">LinkListItem</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">value, next</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">value</span> = value;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">next</span> = next;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">add</span>(<span class="params">previous</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">next</span> = previous.<span class="property">next</span>;</span><br><span class="line">    previous.<span class="property">next</span> = <span class="variable language_">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">remove</span>(<span class="params">previous</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">next</span>) &#123;</span><br><span class="line">      previous.<span class="property">next</span> = <span class="variable language_">this</span>.<span class="property">next</span>;</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">next</span> = <span class="literal">undefined</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">replace</span>(<span class="params">newItem</span>) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">LinkList</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">array</span>) &#123;</span><br><span class="line">    array.<span class="title function_">reverse</span>();</span><br><span class="line">    <span class="keyword">let</span> next;</span><br><span class="line">    array.<span class="title function_">forEach</span>(<span class="function">(<span class="params">element, i</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> newItem = <span class="keyword">new</span> <span class="title class_">LinkListItem</span>(element, next);</span><br><span class="line">      next = newItem;</span><br><span class="line">      <span class="keyword">if</span> (i === array.<span class="property">length</span> - <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">firstItem</span> = newItem;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">forEach</span>(<span class="params">callback</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> item = <span class="variable language_">this</span>.<span class="property">firstItem</span>;</span><br><span class="line">    <span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">do</span> &#123;</span><br><span class="line">      <span class="title function_">callback</span>(item.<span class="property">value</span>, i, <span class="variable language_">this</span>);</span><br><span class="line">      item = item.<span class="property">next</span>;</span><br><span class="line">      i++;</span><br><span class="line">    &#125; <span class="keyword">while</span> (item);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> test = <span class="keyword">new</span> <span class="title class_">LinkList</span>([<span class="number">1</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]);</span><br><span class="line">test.<span class="title function_">forEach</span>(<span class="function">(<span class="params">item, i, arr</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(item, i, arr);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>


<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>


<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="map本身不会改变原数组任何属性"><a href="#map本身不会改变原数组任何属性" class="headerlink" title="map本身不会改变原数组任何属性"></a>map本身不会改变原数组任何属性</h4><h4 id="数组元素为基本类型，原数组绝对不会改变。"><a href="#数组元素为基本类型，原数组绝对不会改变。" class="headerlink" title="数组元素为基本类型，原数组绝对不会改变。"></a>数组元素为基本类型，原数组绝对不会改变。</h4><h4 id="但若是原数组元素为引用类型，-且在map中手动操作，-此时会改变原数组，但这与map方法本身无关，"><a href="#但若是原数组元素为引用类型，-且在map中手动操作，-此时会改变原数组，但这与map方法本身无关，" class="headerlink" title="但若是原数组元素为引用类型， 且在map中手动操作， 此时会改变原数组，但这与map方法本身无关，"></a>但若是原数组元素为引用类型， 且在map中手动操作， 此时会改变原数组，但这与map方法本身无关，</h4><h4 id="map方法不会改变原数组，这属于强行访问到对象内部进行重新赋值"><a href="#map方法不会改变原数组，这属于强行访问到对象内部进行重新赋值" class="headerlink" title="map方法不会改变原数组，这属于强行访问到对象内部进行重新赋值"></a>map方法不会改变原数组，这属于强行访问到对象内部进行重新赋值</h4><p><a target="_blank" rel="noopener" href="https://blog.csdn.net/black_white_1/article/details/126710575">https://blog.csdn.net/black_white_1/article/details/126710575</a></p>

  </div>
  
  
    
    <div class='footer'>
       <!-- 参考资料、相关资料等 -->
      
       <!-- 相关文章 -->
      
      <!-- 版权声明组件 -->
      
      <!-- 打赏组件 -->
      
    </div>
  
  
    


  <div class='article-meta' id="bottom">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateModified" datetime="2024-08-01T16:56:36+08:00">
  <a class='notlink'>
    <i class="fa-solid fa-edit fa-fw" aria-hidden="true"></i>
    <p>更新于：Aug 1, 2024</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/tags/Array/" rel="nofollow"><i class="fa-solid fa-hashtag fa-fw" aria-hidden="true"></i><p>Array</p></a></div>
  <span hidden itemprop="keywords">Array</span>


        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://example.com/2023/12/18/Array/&title=Array - Knowledge&summary="
          
          >
          
            <img src="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/logo/128/qq.png" class="lazyload" data-srcset="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/logo/128/qq.png" srcset="">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://example.com/2023/12/18/Array/&title=Array - Knowledge&summary="
          
          >
          
            <img src="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/logo/128/qzone.png" class="lazyload" data-srcset="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/logo/128/qzone.png" srcset="">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://service.weibo.com/share/share.php?url=http://example.com/2023/12/18/Array/&title=Array - Knowledge&summary="
          
          >
          
            <img src="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/logo/128/weibo.png" class="lazyload" data-srcset="https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/logo/128/weibo.png" srcset="">
          
        </a>
      
    
      
    
      
    
  </div>
</div>



        
      
    </div>
    <!-- Custom Files bottomMeta begin -->
    
    <!-- Custom Files bottomMeta end -->
  </div>


  
  

  
    <div class="prev-next">
      
        <a class='prev' href='/2023/12/19/Object/'>
          <p class='title'><i class="fa-solid fa-chevron-left" aria-hidden="true"></i>Object</p>
          <p class='content'>Object.is()12345678910111213141516171819202122232425262728293031323334353637383940414243444546474...</p>
        </a>
      
      
        <a class='next' href='/2023/12/18/nuxt3/'>
          <p class='title'>Nuxt3的学习<i class="fa-solid fa-chevron-right" aria-hidden="true"></i></p>
          <p class='content'>在学习之前，我们首先要知道客户端渲染和服务端渲染的区别Nuxt3-动态更改meta信息（关键词、标题、描述）参考链接 https://blog.csdn.net/fat_shady/articl...</p>
        </a>
      
    </div>
  
  <!-- Custom Files postEnd begin-->
  
  <!-- Custom Files postEnd end-->
</article>


  


  <article class="post white-box shadow floatable blur" id="comments">
    <span hidden>
      <meta itemprop="discussionUrl" content="/2023/12/18/Array/index.html#comments">
    </span>
    <p ct><i class='fa-solid fa-comments'></i> 评论</p>
    

    <div id="layoutHelper-comments"></div>

  </article>






</div>
<aside id='l_side' itemscope itemtype="http://schema.org/WPSideBar">
  

  
    
    
      
    
  


<div class="widget-sticky pjax">

  
  


  <section class="widget toc-wrapper desktop mobile " id="toc-div" >
    
  <header>
    
      <i class="fa-solid fa-list fa-fw" aria-hidden="true"></i><span class='name'>本文目录</span>
    
  </header>


    <div class='content'>
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#reduce-%E6%96%B9%E6%B3%95"><span class="toc-text">reduce()方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sort-%E6%96%B9%E6%B3%95"><span class="toc-text">sort()方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-from"><span class="toc-text">Array.from()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-fill"><span class="toc-text">Array.fill()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Array-map"><span class="toc-text">Array.map()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#forEach-filter-some"><span class="toc-text">forEach filter some</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%B8%80%E4%BA%9B%E8%BD%AC%E6%8D%A2%E6%A1%88%E4%BE%8B"><span class="toc-text">数组对象的一些转换案例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#some-every-find-findIndex"><span class="toc-text">some every find findIndex</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Underscore%E6%95%B0%E7%BB%84-1-10"><span class="toc-text">Underscore数组 1-10</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B01"><span class="toc-text">自定义函数1</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B02"><span class="toc-text">自定义函数2</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B03"><span class="toc-text">自定义函数3</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#map%E6%9C%AC%E8%BA%AB%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%E4%BB%BB%E4%BD%95%E5%B1%9E%E6%80%A7"><span class="toc-text">map本身不会改变原数组任何属性</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E4%B8%BA%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%8E%9F%E6%95%B0%E7%BB%84%E7%BB%9D%E5%AF%B9%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E3%80%82"><span class="toc-text">数组元素为基本类型，原数组绝对不会改变。</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%86%E8%8B%A5%E6%98%AF%E5%8E%9F%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E4%B8%BA%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B%EF%BC%8C-%E4%B8%94%E5%9C%A8map%E4%B8%AD%E6%89%8B%E5%8A%A8%E6%93%8D%E4%BD%9C%EF%BC%8C-%E6%AD%A4%E6%97%B6%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%8C%E4%BD%86%E8%BF%99%E4%B8%8Emap%E6%96%B9%E6%B3%95%E6%9C%AC%E8%BA%AB%E6%97%A0%E5%85%B3%EF%BC%8C"><span class="toc-text">但若是原数组元素为引用类型， 且在map中手动操作， 此时会改变原数组，但这与map方法本身无关，</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#map%E6%96%B9%E6%B3%95%E4%B8%8D%E4%BC%9A%E6%94%B9%E5%8F%98%E5%8E%9F%E6%95%B0%E7%BB%84%EF%BC%8C%E8%BF%99%E5%B1%9E%E4%BA%8E%E5%BC%BA%E8%A1%8C%E8%AE%BF%E9%97%AE%E5%88%B0%E5%AF%B9%E8%B1%A1%E5%86%85%E9%83%A8%E8%BF%9B%E8%A1%8C%E9%87%8D%E6%96%B0%E8%B5%8B%E5%80%BC"><span class="toc-text">map方法不会改变原数组，这属于强行访问到对象内部进行重新赋值</span></a></li></ol></li></ol></li></ol>
    </div>
  </section>

  

</div>


<!-- 没有 pjax 占位会报错 万恶的 pjax -->

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <div class="pjax">
    <!-- pjax占位 -->
  </div>

  <!-- Custom Files side begin -->
  
  <!-- Custom Files side end -->
</aside>



          <!--此文件用来存放一些不方便取值的变量-->
<!--思路大概是将值藏到重加载的区域内-->

<pjax>
<script>
  window.pdata={}
  pdata.ispage=true;
  pdata.commentPath="";
  pdata.commentPlaceholder="";
  pdata.commentConfig={};
  //  see: /layout/_partial/scripts/_ctrl/coverCtrl.ejs
  
    // header
    var l_header=document.getElementById("l_header");
    
    l_header.classList.add("show");
    
    
      // cover
      var cover_wrapper=document.querySelector('#l_cover .cover-wrapper');
      var scroll_down=document.getElementById('scroll-down');
      cover_wrapper.id="none";
      cover_wrapper.style.display="none";
      scroll_down.style.display="none";
    
  
</script>
</pjax>
        </div>
        
  
  <footer class="footer clearfix"  itemscope itemtype="http://schema.org/WPFooter">
    <br><br>
    
      
        <div class="aplayer-container">
          


        </div>
      
    
      
        <br>
        <div class="social-wrapper" itemprop="about" itemscope itemtype="http://schema.org/Thing">
          
            
          
            
          
            
          
        </div>
      
    
      
        <div><p>Blog content follows the <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License</a></p>
</div>
      
    
      
        
          <div><p><span id="lc-sv">本站总访问量为 <span id='number'><i class="fa-solid fa-loader fa-spin fa-fw" aria-hidden="true"></i></span> 次</span> <span id="lc-uv">访客数为 <span id='number'><i class="fa-solid fa-loader fa-spin fa-fw" aria-hidden="true"></i></span> 人</span></p>
</div>
        
      
    
      
        Use
        <a href="https://github.com/volantis-x/hexo-theme-volantis/#5.8.0" target="_blank" class="codename">Volantis</a>
        as theme
      
    
      
        <div class='copyright'>
        <p><a href="/">Copyright © since 2017 XXX</a></p>

        </div>
      
    
    <!-- Custom Files footer begin-->
    
    <!-- Custom Files footer end-->
  </footer>


        <a id="s-top" class="fa-solid fa-arrow-up fa-fw" href="/" onclick="return false;" title="top"></a>
      </div>
    </div>
    <div>
      <script>
  /******************** volantis.dom ********************************/
  // 页面选择器 将dom对象缓存起来 see: /source/js/app.js etc.
  volantis.dom.bodyAnchor = volantis.dom.$(document.getElementById("safearea")); // 页面主体
  volantis.dom.topBtn = volantis.dom.$(document.getElementById('s-top')); // 向上
  volantis.dom.wrapper = volantis.dom.$(document.getElementById('wrapper')); // 整个导航栏
  volantis.dom.coverAnchor = volantis.dom.$(document.querySelector('#l_cover .cover-wrapper')); // 1个
  volantis.dom.switcher = volantis.dom.$(document.querySelector('#l_header .switcher .s-search')); // 搜索按钮   移动端 1个
  volantis.dom.header = volantis.dom.$(document.getElementById('l_header')); // 移动端导航栏
  volantis.dom.search = volantis.dom.$(document.querySelector('#l_header .m_search')); // 搜索框 桌面端 移动端 1个
  volantis.dom.mPhoneList = volantis.dom.$(document.querySelectorAll('#l_header .m-phone .list-v')); //  手机端 子菜单 多个
</script>

<script>
  
  volantis.css("https://unpkg.com/volantis-static@0.0.1654736714924/libs/@fortawesome/fontawesome-free/css/all.min.css");
  
  
  
</script>

<!-- required -->


<!-- internal -->

<script src="/js/app.js"></script>






<!-- rightmenu要在darkmode之前（ToggleButton） darkmode要在comments之前（volantis.dark.push）-->



<script>
  function loadIssuesJS() {
    
      const sites_api = document.getElementById('sites-api');
      if (sites_api != undefined && typeof SitesJS === 'undefined') {
        volantis.js("/js/plugins/tags/sites.js")
      }
    
    
      const friends_api = document.getElementById('friends-api');
      if (friends_api != undefined && typeof FriendsJS === 'undefined') {
        volantis.js("/js/plugins/tags/friends.js")
      }
    
    
      const contributors_api = document.getElementById('contributors-api');
      if (contributors_api != undefined && typeof ContributorsJS === 'undefined') {
        volantis.js("/js/plugins/tags/contributors.js")
      }
    
  };
  loadIssuesJS()
  volantis.pjax.push(()=>{
    loadIssuesJS();
  })

</script>




  <script defer src="https://unpkg.com/volantis-static@0.0.1654736714924/libs/vanilla-lazyload/dist/lazyload.min.js"></script>
<script>
  // https://www.npmjs.com/package/vanilla-lazyload
  // Set the options globally
  // to make LazyLoad self-initialize
  window.lazyLoadOptions = {
    elements_selector: ".lazyload",
    threshold: 0
  };
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window.addEventListener(
    "LazyLoad::Initialized",
    function (event) {
      window.lazyLoadInstance = event.detail.instance;
    },
    false
  );
  document.addEventListener('DOMContentLoaded', function () {
    lazyLoadInstance.update();
  });
  document.addEventListener('pjax:complete', function () {
    lazyLoadInstance.update();
  });
</script>




  

<script>
  window.FPConfig = {
	delay: 0,
	ignoreKeywords: ["#"],
	maxRPS: 6,
	hoverDelay: 0
  };
</script>
<script defer src="https://unpkg.com/volantis-static@0.0.1654736714924/libs/flying-pages/flying-pages.min.js"></script>









      <script>
  volantis.layoutHelper("comments",`<div id="giscus_container"></div>`)

  volantis.giscus = {};

  function check_giscus() {
    if (volantis.dark.mode === "dark") {
      volantis.giscus.Theme = 'dark';
    } else {
      volantis.giscus.Theme = 'light';
    }

    return document.getElementById("giscus_container");
  }

  function pjax_giscus() {
    const HEAD = check_giscus();
    if (!HEAD) return;
    let cfg = Object.assign({"theme":{"light":"light","dark":"dark"}},pdata.commentConfig)
    const script = document.createElement('script');
    script.setAttribute('src', 'https://giscus.app/client.js');
    Object.keys(cfg).forEach(k=>{
      if (k != "theme") {
        script.setAttribute('data-'+k, cfg[k]);
      }
    })
    script.setAttribute('data-theme', volantis.giscus.Theme);
    script.setAttribute('crossorigin', "anonymous");
    HEAD.appendChild(script);
  }

  function dark_giscus() {
    const HEAD = check_giscus();
    if (!HEAD) return;

    const message = {
      setConfig: {
        theme: volantis.giscus.Theme
      }
    };
    const giscusIframe = document.querySelector('iframe.giscus-frame');
    giscusIframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
  }
  pjax_giscus();
  volantis.pjax.push(pjax_giscus);
  volantis.dark.push(dark_giscus);
</script>

    





<!-- optional -->

  <script>
  const SearchServiceDataPathRoot = ("/" || "/").endsWith("/") ?
    "/" || "/" :
    "//" || "/";
  const SearchServiceDataPath = SearchServiceDataPathRoot + "content.json";

  function loadSearchScript() {
    // see: layout/_partial/scripts/_ctrl/cdnCtrl.ejs
    return volantis.js("/js/search/hexo.js");
  }

  function loadSearchService() {
    loadSearchScript();
    document.querySelectorAll(".input.u-search-input").forEach((e) => {
      e.removeEventListener("focus", loadSearchService, false);
    });

    document.querySelectorAll(".u-search-form").forEach((e) => {
      e.addEventListener("submit", (event) => {
        event.preventDefault();
      }, false);
    });
  }

  // 打开并搜索 字符串 s
  function OpenSearch(s) {
    if (typeof SearchService === 'undefined')
      loadSearchScript().then(() => {
        SearchService.setQueryText(s);
        SearchService.search();
      });
    else {
      SearchService.setQueryText(s);
      SearchService.search();
    }
  }

  // 访问含有 ?s=xxx  的链接时打开搜索 // 与搜索引擎 structured data 相关: /scripts/helpers/structured-data/lib/config.js
  if (window.location.search && /^\?s=/g.test(window.location.search)) {
    let queryText = decodeURI(window.location.search)
      .replace(/\ /g, "-")
      .replace(/^\?s=/g, "");
    OpenSearch(queryText);
  }

  // 搜索输入框获取焦点时加载搜索
  document.querySelectorAll(".input.u-search-input").forEach((e) => {
    e.addEventListener("focus", loadSearchService, false);
  });
</script>







  <script>



  function pjax_highlightjs_copyCode(){
    if (!(document.querySelector(".highlight .code pre") ||
      document.querySelector(".article pre code"))) {
      return;
    }
    VolantisApp.utilCopyCode(".highlight .code pre, .article pre code")
  }
  volantis.requestAnimationFrame(pjax_highlightjs_copyCode)
  volantis.pjax.push(pjax_highlightjs_copyCode)

</script>












  <script>
  function load_swiper() {
    if (!document.querySelectorAll(".swiper-container")[0]) return;
    volantis.css("https://unpkg.com/volantis-static@0.0.1654736714924/libs/swiper/swiper-bundle.min.css");
    volantis.js("https://unpkg.com/volantis-static@0.0.1654736714924/libs/swiper/swiper-bundle.min.js").then(() => {
      pjax_swiper();
    });
  }

  load_swiper();

  function pjax_swiper() {
    volantis.swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 8,
      centeredSlides: true,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }

  volantis.pjax.push(() => {
    if (!document.querySelectorAll(".swiper-container")[0]) return;
    if (typeof volantis.swiper === "undefined") {
      load_swiper();
    } else {
      pjax_swiper();
    }
  });
</script>


<!-- pjax 标签必须存在于所有页面 否则 pjax error -->
<pjax>

</pjax>

<script>
  function listennSidebarTOC() {
    const navItems = document.querySelectorAll(".toc li");
    if (!navItems.length) return;
    let targets = []
    const sections = [...navItems].map((element) => {
      const link = element.querySelector(".toc-link");
      const target = document.getElementById(
        decodeURI(link.getAttribute("href")).replace("#", "")
      );
      targets.push(target)
      // 解除 a 标签 href 的 锚点定位, a 标签 href 的 锚点定位 会随机启用?? 产生错位???
      link.setAttribute("onclick","return false;")
      link.setAttribute("toc-action","toc-"+decodeURI(link.getAttribute("href")).replace("#", ""))
      link.setAttribute("href","/")
      // 配置 点击 触发新的锚点定位
      link.addEventListener("click", (event) => {
        event.preventDefault();
        // 这里的 addTop 是通过错位使得 toc 自动展开.
        volantis.scroll.to(target,{addTop: 5, observer:true})
        // Anchor id
        history.pushState(null, document.title, "#" + target.id);
      });
      return target;
    });

    function activateNavByIndex(target) {
      if (target.classList.contains("active-current")) return;

      document.querySelectorAll(".toc .active").forEach((element) => {
        element.classList.remove("active", "active-current");
      });
      target.classList.add("active", "active-current");
      let parent = target.parentNode;
      while (!parent.matches(".toc")) {
        if (parent.matches("li")) parent.classList.add("active");
        parent = parent.parentNode;
      }
    }

    // 方案一：
    volantis.activateNavIndex=0
    activateNavByIndex(navItems[volantis.activateNavIndex])
    volantis.scroll.push(()=>{
      if (targets[0].getBoundingClientRect().top >= 0) {
        volantis.activateNavIndex = 0
      }else if (targets[targets.length-1].getBoundingClientRect().top < 0) {
        volantis.activateNavIndex = targets.length-1
      } else {
        for (let index = 0; index < targets.length; index++) {
          const target0 = targets[index];
          const target1 = targets[(index+1)%targets.length];
          if (target0.getBoundingClientRect().top < 0&&target1.getBoundingClientRect().top >= 0) {
            volantis.activateNavIndex=index
            break;
          }
        }
      }
      activateNavByIndex(navItems[volantis.activateNavIndex])
    })

    // 方案二：
    // IntersectionObserver 不是完美精确到像素级别 也不是低延时性的
    // function findIndex(entries) {
    //   let index = 0;
    //   let entry = entries[index];
    //   if (entry.boundingClientRect.top > 0) {
    //     index = sections.indexOf(entry.target);
    //     return index === 0 ? 0 : index - 1;
    //   }
    //   for (; index < entries.length; index++) {
    //     if (entries[index].boundingClientRect.top <= 0) {
    //       entry = entries[index];
    //     } else {
    //       return sections.indexOf(entry.target);
    //     }
    //   }
    //   return sections.indexOf(entry.target);
    // }
    // function createIntersectionObserver(marginTop) {
    //   marginTop = Math.floor(marginTop + 10000);
    //   let intersectionObserver = new IntersectionObserver(
    //     (entries, observe) => {
    //       let scrollHeight = document.documentElement.scrollHeight;
    //       if (scrollHeight > marginTop) {
    //         observe.disconnect();
    //         createIntersectionObserver(scrollHeight);
    //         return;
    //       }
    //       let index = findIndex(entries);
    //       activateNavByIndex(navItems[index]);
    //     }, {
    //       rootMargin: marginTop + "px 0px -100% 0px",
    //       threshold: 0,
    //     }
    //   );
    //   sections.forEach((element) => {
    //     element && intersectionObserver.observe(element);
    //   });
    // }
    // createIntersectionObserver(document.documentElement.scrollHeight);
  }

  document.addEventListener("DOMContentLoaded", ()=>{
    volantis.requestAnimationFrame(listennSidebarTOC)
  });
  document.addEventListener("pjax:success", ()=>{
    volantis.requestAnimationFrame(listennSidebarTOC)
  });
</script>



<script>
  document.onreadystatechange = function () {
    if (document.readyState == 'complete') {
      // 页面加载完毕 样式加载失败，或是当前网速慢，或是开启了省流模式
      const { saveData, effectiveType } = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {}
      if (getComputedStyle(document.querySelector("#safearea"), null)["display"] == "none" || saveData || /2g/.test(effectiveType)) {
        document.querySelectorAll(".reveal").forEach(function (e) {
          e.style["opacity"] = "1";
        });
        document.querySelector("#safearea").style["display"] = "block";
      }
    }
  }
</script>


  <script type="application/ld+json">[{"@context":"http://schema.org","@type":"Organization","name":"Knowledge","url":"http://example.com/","logo":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},{"@context":"http://schema.org","@type":"Person","name":"weijt","image":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"http://example.com/","sameAs":["https://github.com/volantis-x"],"description":"html css node vue node"},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"http://example.com/","name":"Knowledge"}},{"@type":"ListItem","position":3,"item":{"@id":"http://example.com/2023/12/18/Array/","name":"Array"}}]},{"@context":"http://schema.org","@type":"WebSite","name":"Knowledge","url":"http://example.com/","keywords":"html css node vue node","description":"html css node vue node","author":{"@type":"Person","name":"weijt","image":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"http://example.com/","description":"html css node vue node"},"publisher":{"@type":"Organization","name":"Knowledge","url":"http://example.com/","logo":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},"potentialAction":{"@type":"SearchAction","name":"Site Search","target":{"@type":"EntryPoint","urlTemplate":"http://example.com?s={search_term_string}"},"query-input":"required name=search_term_string"}},{"@context":"http://schema.org","@type":"BlogPosting","headline":"Array","description":"html css node vue node","inLanguage":"en","mainEntityOfPage":{"@type":"WebPage","@id":"http://example.com/2023/12/18/Array/"},"author":{"@type":"Person","name":"weijt","image":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png"},"url":"http://example.com/"},"publisher":{"@type":"Organization","name":"Knowledge","logo":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}},"url":"http://example.com/2023/12/18/Array/","wordCount":0,"datePublished":"2023-12-18T01:56:49.146Z","dateModified":"2024-08-01T08:56:36.747Z","keywords":"Array","image":{"@type":"ImageObject","url":"https://unpkg.com/volantis-static@0.0.1654736714924/media/org.volantis/blog/favicon/android-chrome-192x192.png","width":192,"height":192}}]</script>



      
        <!--
  pjax重载区域接口：
  1.  <pjax></pjax> 标签 pjax 标签必须存在于所有页面 否则 pjax error
  2.  script[data-pjax]
  3.  .pjax-reload script
  4.  .pjax
-->



<script src="https://unpkg.com/volantis-static@0.0.1654736714924/libs/pjax/pjax.min.js"></script>


<script>
    var pjax;
    document.addEventListener('DOMContentLoaded', function () {
      pjax = new Pjax({
        elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox]):not([onclick="return false;"]):not([onclick="return!1"]):not([target="_blank"]):not([target="view_window"]):not([href$=".xml"])',
        selectors: [
          "head title",
          "head meta[name=keywords]",
          "head meta[name=description]",
          
          "#l_main",
          "#pjax-header-nav-list",
          ".pjax",
          "pjax", // <pjax></pjax> 标签
          "script[data-pjax], .pjax-reload script" // script标签添加data-pjax 或 script标签外层添加.pjax-reload 的script代码段重载
        ],
        cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
        timeout: 5000,
        
      });
    });

    document.addEventListener('pjax:send', function (e) {
      //window.stop(); // 相当于点击了浏览器的停止按钮

      try {
        var currentUrl = window.location.pathname;
        var targetUrl = e.triggerElement.href;
        var banUrl = [""];
        if (banUrl[0] != "") {
          banUrl.forEach(item => {
            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
              window.location.href = targetUrl;
            }
          });
        }
      } catch (error) {}

      // 使用 volantis.pjax.send 方法传入pjax:send回调函数 参见layout/_partial/scripts/global.ejs
      volantis.pjax.method.send.start();
    });

    document.addEventListener('pjax:complete', function () {
      // 使用 volantis.pjax.push 方法传入重载函数 参见layout/_partial/scripts/global.ejs
      volantis.pjax.method.complete.start();
    });

    document.addEventListener('pjax:error', function (e) {
      if(volantis.debug) {
        console.error(e);
        console.log('pjax error: \n' + JSON.stringify(e));
      }else{
        // 使用 volantis.pjax.error 方法传入pjax:error回调函数 参见layout/_partial/scripts/global.ejs
        volantis.pjax.method.error.start();
        window.location.href = e.triggerElement.href;
      }
    });
</script>

      
    </div>
    <!-- import body_end begin-->
    <!-- import body_end end-->
    <!-- Custom Files bodyEnd begin-->
    
    <!-- Custom Files bodyEnd end-->
    <!-- front-matter body_end begin -->
    <!-- front-matter body_end end -->
  </body>
</html>
